购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.3 移动UI设计的原则

因为移动端在屏幕尺寸和操作方式等方面具有局限性,所以移动UI设计的形式和内容较为简洁,设计师在制定方案时要遵守的规则也相对简单。即便如此,移动UI设计中仍要遵循以下基本原则。

1.3.1 一致性原则

一致性原则是移动UI设计中最重要的一项原则,它是指UI交互元素的一致和交互行为的一致。为用户提供风格统一的UI,意味着用户不必花过多的时间去学习,就能轻松掌握App的使用方法。

在进行移动UI设计时,设计师会先根据受众对象定义UI的整体风格,再根据这个风格来设计UI中的单个元素。这些单个元素是组成UI的基础,它们的设计首先需要有统一的风格,可以分别从其外形、材质、颜色等方面去考虑,然后建立统一的标签来完成元素的设计,如下左图所示。将制作好的单个元素进行合理的排版布局,就能形成一个比较完整的UI,由于各个元素采用了统一的设计风格,将其组合到一起时,整个UI就能给用户留下和谐且统一的印象,如下右图所示。

每个设计都会有不同的视觉表现,并且每个页面也会有不同的组成元素,包括文字、组件、图标等。在设计一个App的UI时,可以根据要表现的风格,提取一些能够使画面相对统一的要素,如相同的形状和类似的颜色等,在保证主题不变的情况下,使设计出的UI能够呈现出相对一致的效果。

如下图所示的App UI中,对不同区域的文字使用了相同的字体,通过字号的变化来展现文字内容的主次关系,此外,对一些比较重要的操作按钮使用相同的颜色进行填充,形成了比较统一的视觉效果。

1.3.2 习惯性原则

所有的设计都是为用户而服务的,所以在进行移动UI设计时,应该更多地为用户考虑,严格按照用户的操作和使用习惯等进行设计。简单来说,就是不要求用户去记住设计,而是让设计符合用户的习惯,达到事半功倍的效果。

以用户的语言习惯为例,在做移动UI设计时,按钮和菜单上的文字内容设定就需要遵从用户的语言习惯。例如,在针对中文用户的电商App中,商品展示页面的操作按钮上就可以添加“抢购”或“购买”等中文文字,以提示用户点击此按钮可以进行的操作,如下图所示。

除语言习惯外,用户的操作习惯也是影响移动UI设计的重要因素。一项针对智能手机操作习惯的调查显示,大多数智能手机用户习惯以单手持握、双手持握和抱握三种方式持握手机。

单手持握就是用一只手握住手机。在单手持握手机的人中,大部分会用右手大拇指触摸屏幕,而少部分则会用左手大拇指触摸屏幕,如下图所示。

双手持握则是用双手同时握住手机。双手持握手机的人一般会用大拇指之外的手指抓住手机,用两根大拇指来触摸屏幕,如下图所示。

抱握手机的人基本上采用两种方式,一种用大拇指触摸屏幕,另一种用食指触摸屏幕,如下图所示。与单手持握相比,抱握会更稳当。

考虑到上述操作习惯,UI中按钮等控件的位置就会影响用户的使用体验,因此,在进行移动UI设计时,需要根据不同用户的操作习惯来安排控件的位置,用户使用起来才会更加顺手。下左图中App的主要操作区域被安排在UI的下半部分,适合大部分单手持握手机的用户;下右图中App的主要操作区域被安排在UI的上半部分,适合双手持握手机的用户。

进行移动UI设计时,还需要考虑用户的认知习惯。设计师不能一味地求新、求变,对于一些已经约定俗成的功能,或者用户已经习惯于与某个功能联系起来的图标等,不能随意更改。例如,在移动UI设计中,大多数设计师会使用“信封”图标来代表“邮件”功能,如下左图所示,大多数用户也已经接受了这一设定。在这一前提下,若使用“信封”图标来代表“收藏”功能,如下右图所示,就容易误导用户。

1.3.3 清晰性原则

清晰性原则是指保持UI设计的清晰性。清晰的UI不仅更美观,而且也更利于用户浏览信息。主题不明确且信息概念模糊的UI,会影响用户的使用体验,从而大大降低App的使用率。

下图所示为两款汽车销售类App的UI设计效果图。前一幅UI设计效果图中添加了对应的汽车产品图片,可以起到明确车型信息的作用,再结合产品图片左侧的数字,明确了排行顺序,使得整个页面条理清晰;而后一幅UI设计效果图中没有汽车产品图片,排行数字也不够醒目,相比之下,这样的表现方式便不利于汽车产品信息的传递。

1.3.4 易用性原则

易用性原则是指移动UI设计需要清晰地表达出UI的功能,以减少用户的选择错误。也许对于移动UI设计师来说,UI的美观性非常重要,但是用户更关心的是UI是否实用、好用。如果用户打开App后无从下手,或者需要花费大量时间寻找功能按钮,那么这样的UI即使设计得再漂亮也是不合格的。因此,UI的易用性相对于美观性而言更加重要。

移动UI设计中的易用性原则包括按钮名称应该易懂,用词应该准确,图标辨识度要高等。

如下图所示的UI设计即严格遵循易用性原则,将不同的功能利用选项卡进行了合理的分区,并搭配简单的文字说明其功能。此外,在同一页面中尽量控制控件的数量,并用比较醒目的颜色指示重要的控件,以方便用户观察和使用。

1.3.5 人性化原则

人性化原则是指移动UI设计要协调技术与用户的关系,既能满足用户的功能需求,又能满足用户的心理需求,给用户方便、舒适的体验。举例来说,许多App允许用户自由地设置UI的风格,让用户感觉这个App是专属于自己的,满足了用户对“个性化”的需求,这就是人性化原则的体现。

如下图所示,这款阅读App即允许用户根据自己的审美喜好定制UI的背景、文字的字体和字号等,以及根据自己的操作习惯定制UI的操作方式。 SKSnvsBV+IfxTsEBRvUZ6ydLmMy8VRJkP2Ue5H+MmPCBPJ0wBuD63L0kTgWoLG+A

点击中间区域
呼出菜单
上一章
目录
下一章
×