美文网首页视觉设计––界面排版设计资料移动产品设计[MobileDesign]
移动应用界面设计中一些页面布局的设计原则

移动应用界面设计中一些页面布局的设计原则

作者: 岳山丘 | 来源:发表于2015-05-03 10:41 被阅读1301次

1.移动终端的屏幕显示面积是很宝贵的,应该避免将无用的横幅、各种条栏、图片和图案放在屏幕上。类似向用户展示层级和结构这样的目的也是次要的,如果需要这样做,设计师必须能够说清楚理由。

2.根据设计层级来布局页面元素。尽管存在其他的形式和其他的交互类型强调时间是另一个因素,但出于简单性的考虑,设计层级定义为“位置→尺寸→形状→对比→颜色→形式”。页面上最重要的那些项会显得更大、更高、更亮,诸如此类。

3.考虑格式塔理论中的封闭律、连续律、前后景律、邻近律、相对大小律、相似律和对称律。

4.使用一致和简单的导航元素。人们的短时记忆容量是有限的。因此,人们会将重要的信息通过自动筛选而凸显出来。有意义的元素会夸张地呈现,而无关元素会忽视和省略。

5.找寻路径是完全基于真实世界的导航行为,就像在城里四处转转或者在一栋楼里找寻某个房间。环境心理学家凯文林奇(Keven Lynch)构建出人类用于确定自身位置的五个寻路元素:道路、边界、节点、地标和分区。在网站或者移动设备上浏览内容时同样可以参考这些环境元素。在进行交互设计时,页码、标题、页眉与页脚、页签、链接以及更多的元素将作为一个整体为用户提供帮助。

6.在规划内容时考虑用户会怎样阅读你的页面。通常来说,用户会在内容区域的左上角找寻具有高优先级的信息(Nielsen,2010)。

7.将文本设计为多栏结构不是某种设计风格,而是用于限制每行的长度。每行宽度并非基于固定的尺寸或页面宽度,而是基于字数。长文本不利于阅读。每行最大宽度应限制在大约60到65个字符(指英文字符)。每行最短宽度则取决于你使用了多少长单词。(注:这部分应该是限制文本长度,在中文情况下要自己控制。)

8.标题用于描述页面、每页的元素以及内容的分节。合理地使用它们,并始终保持一致。

9.默认的文本对齐方式应该是左对齐。对于从右向左阅读的语言,默认的文本对齐方式是右对齐。

10.尝试把信息以列表方式呈现而不是通过表格方式来呈现。

11.“伪底”和“伪顶”这两个词是在交互设计中特指用户错以为浏览已经到达页面的底部或顶部而停止滚动页面的情况。如果文本从一栏接到另一栏或者从一页接到另一页,那么栏与栏之间、页与页之间的关系就需要设计清楚。“转至第86页”这个用法就是在交互设计继承了传统用法之后形成的超链接。“阅读博客文章的剩余部分”基本上也是同样的情况。

12.尺寸可能会大于显示屏幕(或常称为“视图”)的页面,对交互系统是额外的挑战。

摘自:《移动应用界面设计》。

欢迎大家关注我的简书。

我的文章也会在微信公众号中更新,大家可以关注公众号“iamyueshanqiu”来订阅。

相关文章

  • 移动应用界面设计中一些页面布局的设计原则

    1.移动终端的屏幕显示面积是很宝贵的,应该避免将无用的横幅、各种条栏、图片和图案放在屏幕上。类似向用户展示层级和结...

  • 为移动设备而设计需要注意的一些原则

    最近在看《移动应用界面设计》这本书,里面提到了移动设备设计的一些原则。结合自己的经验和书中的内容,整理了一些为移动...

  • 2018-04-08

    GUI图形用户界面设计、AUI传统美术、WUI网页设计与布局、MUI移动设备图标、交互及界面设计的理论、规范和制作...

  • 浮层、下一级页面的使用比较

    本文是移动端界面设计中 对APP中浮层与新页面的应用场景讨论。 本文内容借鉴了知乎用户:愚人码头,谭鹏飞,teni...

  • 《移动UI设计法则》阅读笔记(三)

    3.1图片在界面中的布局展示形式 3.1.1传统矩阵式布局 矩阵式布局是最常见的多图形式,在进行移动产品界面设计时...

  • 分割线的分类和使用规则

    *界面设计中的分割线* 在UI界面中,分割线是页面重要组成元素。线元素可以对页面进行分割、编排或重新布局,起到对相...

  • Week4-文献练习

    从“平静技术设计原则”指导可穿戴设备的用户交互界面设计 随着全新移动互联网时代的到来,智能移动终...

  • 个人信息页面

    个人信界面设计效果 页面布局 页面布局相较于登录界面更复杂,不适合所有元素使用绝对定位,由于小程序自带有chrom...

  • 2018年移动应用9大UI设计趋势

    移动应用界面设计趋势根据用户需求不断变化。然而,这并不意味着2018的移动应用UI设计趋势是无法预测的。事实上,经...

  • 多种UI和界面设计汇总(一)

    下面汇总了一些不错的UI设计的效果图,让我们看看多种UI布局和界面设计。它们风格迥异,也基本上都是Web页面上的。...

网友评论

本文标题:移动应用界面设计中一些页面布局的设计原则

本文链接:https://www.haomeiwen.com/subject/ndgbfttx.html