一个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条基本原则的更多相关文章

  1. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  2. 最实用的APP界面设计知识,有温度的APP设计(转)

    在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...

  3. 26款能够吸引用户的 iPhone App 界面设计

    在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...

  4. app界面设计字体规范

    通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...

  5. APP界面设计 大概总结

    APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...

  6. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  7. [UI] APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.

  8. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  9. 菜鸟对APP界面设计的一些心得小结

    1. 前言 当我看着我以前做的一些app界面,我意识到我应该把我的界面设计能力水平再提升一个,因为实在是丑啊!贴一些以前的设计: 现在看来,是不能看的了.我主要是做需求设计,后面也有一些美工的工作,我 ...

随机推荐

  1. PhpStudy如何开启Apache的gzip压缩功能?

    要让apache支持gzip功能,要用到deflate_Module和headers_Module. 打开apache的配置文件httpd.conf,大约在105行左右,找到以下两行内容:(这两行不是 ...

  2. visio2010去除直线交叉处的歪曲

    Visio画图时,两根直线交叉时,总是默认会出现一个跨线的标志,在2007前的版本,可以通过以下方式解决: 选中线条,然后菜单的格式->行为->连接线->跨线->添加-> ...

  3. Windows 10创意者更新ISO发布!官方下载

    http://news.mydrivers.com/1/526/526719.htm 去年7月份,微软面向Windows 10推出了“周年更新”,让系统变得更加稳定好用.今天,Windows 10迎来 ...

  4. STOMP协议规范

    原文: STOMP Protocol Specification, Version 1.2 摘要 STOMP是一个简单的可互操作的协议, 被用于通过中间服务器在客户端之间进行异步消息传递.它定义了一种 ...

  5. Bear and Friendship Condition-HZUN寒假集训

    Bear and Friendship Condition time limit per test 1 secondmemory limit per test 256 megabytesinput s ...

  6. Redis模块化基本介绍

    概要 Redis Modules System基本概念 基本应用 参考资料 1. Redis Modules System基本概念 Redis Modules System是4.0出现一大改动点,使得 ...

  7. Dubbo学习-源码学习

    Dubbo概述 dubbo框架提供多协议远程调用,服务提供方可以是分布式部署.dubbo框架可以很简单的帮我们实现微服务. 此处援引官网上图片 dubbo分为客户端和服务提供方 服务方将服务注册到注册 ...

  8. Python测试远程端口连接时间

    问题 最近自己服务器访问别人的服务器,有时候会报超时错误,有时候又能够正常访问别人服务器. 思路 最开始猜测是网络不稳定造成的,但是自己没有收集什么时候超时,什么时候能正常访问别人服务器的日志,搞网络 ...

  9. 使用webpack打包vue工程

    记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...

  10. 使用XHProf分析PHP性能瓶颈(二)

    上一篇文章里,我们介绍了如何基于xhprof扩展来分析PHP性能,并记录到日志里,最后使用xhprof扩展自带的UI在web里展示出来.本篇文章将讲述2个知识点: 使用xhgui代替xhprof的默认 ...