APP界面设计与页面布局的23条基本原则
一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字、图形或表格等进行排版、设计。
优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求、用户行为,也要考虑信息发布者的目标、目的。
对用户行为的迎合和引导,有一些既有原则和方法,比如以下的22条基本原则,-----本文来自25学堂,by admin与个人知识点整理。
1、用户/组织的图标(Logo)在所有页面都处于同一位置。
2、用户所需的所有数据内容均按先后次序合理显示
3、所有重要选项都要在主页显示
4、重要条目要始终显示
5、重要条目显示在页面的顶端中间位置
6、必要的信息要一直显示
7、消息、提示、通知等信息均出现在屏幕上目光容易找到的地方
8、确保主页看起来像主页(使主页有别于其它二三级页面)
9、主页的长度不宜过长
10、APP的导航尽量采用底部导航的方式,菜单数目4-5个最佳

11、每个APP页面长度要适当
12、在长网页上使用可点击的‘内容列表’
13、专门的导航页面要短小(避免滚屏,以便用户一眼能浏览到所有的导航信息)
14、优先使用分页(而非滚屏),同时也可以提高当前页面加载的速度;
15、滚屏不宜太多(最多4个整屏)
16、需要仔细阅读理解文字时,应使用滚屏(而非分页)
17、为框架提供标题(注意:根据不同平台而定,android:标题居中,ios:靠左侧<)
18、注意主页中面板块的高度
19、将一级导航放置在左侧面板(根据人的看东西习惯,习惯性从左到右,从上到下)
20、避免水平滚屏
21、文本区域的周围是否有足够的间隔
22、各条目是否合理分类于各逻辑区,并运用标题将各区域进行清晰划分
23、注意整体App的风格颜色搭配
APP界面设计与页面布局的23条基本原则的更多相关文章
- APP界面设计之页面布局的22条基本原则
移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...
- 最实用的APP界面设计知识,有温度的APP设计(转)
在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...
- 26款能够吸引用户的 iPhone App 界面设计
在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...
- app界面设计字体规范
通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...
- APP界面设计 大概总结
APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...
- APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)
正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...
- [UI] APP界面设计流程
此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.
- TMS WEB CORE直接从HTML&CSS设计的页面布局
TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...
- 菜鸟对APP界面设计的一些心得小结
1. 前言 当我看着我以前做的一些app界面,我意识到我应该把我的界面设计能力水平再提升一个,因为实在是丑啊!贴一些以前的设计: 现在看来,是不能看的了.我主要是做需求设计,后面也有一些美工的工作,我 ...
随机推荐
- Storyboard中ViewController加载的四种方式
这个总结来自于<Programming iOS 10>一书: 1.storyboard的初始化ViewController,通过方法instantiateInitialViewContro ...
- vue实现淘宝商品详情页属性选择功能
方法一是自己想出来的,方法二来自忘记哪里看到的了 不知道是不是你要的效果: 方法一:利用input[type="radio"] css代码: input { display: no ...
- (转)java之Spring(IOC)注解装配Bean详解
java之Spring(IOC)注解装配Bean详解 在这里我们要详细说明一下利用Annotation-注解来装配Bean. 因为如果你学会了注解,你就再也不愿意去手动配置xml文件了,下面就看看 ...
- Redis的安装及学习
最近因为做Chatbot项目需要对于NoSQL数据库进行研究,调研范围包括MongoDB和Redis.本文将介绍Redis在Windows环境的安装及如何利用python来操作Redis数据库. Re ...
- Redis模糊查询
最近使用Redis优化项目功能,其中有一部分为模糊查询,找了很多帖子,也没有找到很好的解决方案和思路,最终皇天不负有心人啊,终于让我找到了!!! 感谢该帖作者:WalkerAlone 原文链接:ht ...
- Mysql-自带的一些功能,基本用法(视图,触发器,事务,存储过程,函数,流程控制)
一. 视图 二. 触发器 三. 事务 四. 存储过程 五. 函数 六. 流程控制 一 .视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用 ...
- .NET之EntityFramework框架运用
1.创建EF模型库 创建类库-->添加新建项-->选择ADO.NET实体数据模型-->选择 来自数据库的EF选择器-->配置数据库链接以及相应的数据库-->看底部(将ap ...
- 50行ruby代码开发一个区块链
区块链是什么?作为一个Ruby开发者,理解区块链的最好办法,就是亲自动手实现一个.只需要50行Ruby代码你就能彻底理解区块链的核心原理! 区块链 = 区块组成的链表? blockchain.ruby ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- mysql中enum类型理解
ENUM是枚举类型,它虽然只能保存一个值,却能够处理多达65535个预定义的值.下面是我写的一个mysql语句 CREATE TABLE student( id INT(11) PRIMARY key ...