新浪博客

移动端交互设计的八个原则与排版设计的六个原则

2016-03-14 22:29阅读:
近几年,交互设计专业也有了蓬勃发展,移动也不落人后,秉承着八原则,持久不衰。
原则一——内容优先:界面布局应以内容为核心,提供符合用户期望的内容。
原则二——为触摸而设计:界面的交互系统以自然手势为基础建构,符合人体工学并保持一致性。
原则三——转换输入方式:使用各种手机的设备特性和设计手段,减少在应用内的文字输入。
原则四——流畅性:保持应用交互的手指及手势的操作流、用户的注意流和界面反馈转场的流畅性。
原则五——多通道设计:发挥设备的多通道特性、协同的多通道界面和交互,让用户更有真实感和沉浸感
原则六——易学性:保持界面架构简单、明了,导航设计清晰易理解,操作简单可见,通过界面元素的表意的和界面提供的线索就能让用户清楚地知道其操作方式。
原则七——为中断而设计:考虑应用的使用情境,确保在各个产出中断的情境下,让用户恢复之前的操作,保持用户的劳动付出。
原则八——智能有爱:给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。
设计方式灵活多变,也是成功的关键
一、内容优先
二、为触摸而设计
三、转换输入方式
四、流畅性
五、多通道设计
六、易学性
七、为中断而设计
八、智能有爱
移动端文字与排版设计的六个原则
大小反差
在桌面端我们可能会采用字号差异较大的文字组合,移动端屏幕较小,容纳的文字也较少,同等的字号差异在小屏幕上的感受会被放大。
原因是我们在使用这两种设备时的观看距离不同,桌面端我们的眼睛离屏幕较远,而在移动端则相反,因此我们应该在移动端使用较小的字号反差。
字重
不要使用PS中的文本加粗,它不仅破坏字体本身的美感,还改变了文字原本的字宽而影响段落内文字的对齐。合理的方式是使用字体本身的字重来控制,比如苹方、STHeiti、Helvetica Neue等字体本身提供Light、Regular、Medium等两三种甚至更多的字重选择。
字间距
不要轻易改变字体默认的字间距,字体设计师已经充分考虑了这款字体所适合的字间距,如果不满意可以更换字体。
颜色反差
移动设备使用环境复杂多变而不局限在室内,可
能在室外,甚至暴露在强烈的阳光下,应确保文字在背景中不会识别困难,即使是色弱者也可以正常阅读。WCAG 2.0中建议的两者颜色反差比应该高于4.5:1(AA级),才能确保更多人及环境都可以轻松阅读。Sketch中有一个插件Color Contrast Analyser可以方便的检测这个比值,你可以使用在线检测工具Colour Contrast Check。
栅格系统
小屏幕上,一些桌面端无关大雅的间距不等问题会变得突出。
Lofter是网易一款精品优雅的App,但其文章正文界面却略有瑕疵:
可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全,导致文字并不能完美地填充满文本框。
上图为iPhone5中此界面的放大效果并加上了辅助线,仔细观察,去除黄色部分各20px的间距后,文本框宽度是558px,而正文使用的字号是30px,所以行末留下18px的空余空间。如果字号定为31px,则刚好可以放下18个字后填满558px像素的文本框。
当然31px的字号在实际环境中可能并不是一个最合理的字号设定,因为它并不能被整除使用到@1x的iOS开发环境。在实际设计中,可以先设定一个栅格系统,以iPhone5为例,定义最小栅格为8x8px的话,得到如下一个栅格图:
以8为基本单位,把所有字号、文本框宽度设定为8的倍数,这样我们就可以确保汉字始终保持对齐。
对齐
“…所有的元素都是正方体。但是从二十世纪开始使用标点后,到了现代桌上出版时代,许多排版工具软体都直接套用来自日本的「禁则处理」—即避头尾点;加上与西方文字混排的状况越来越多,以至於无法做到纵横对齐的基础。但是至少段落的头尾还是需要对齐。这就是为什麼对齐对电子书与长文章来说十分重要的原因。”
在英文的段落排版中,通常是左侧对齐,而让右侧自然形成起伏边(rag)。对中文排版与阅读习惯而言则相反,段落的头尾对齐尤其重要。
先来看一个反例:
这是Zaker的新闻正文的表现,在夹杂了数字或英文字母字符的情况下,原本中文的整齐排列被打乱了,右侧严重参差不齐,非常难看。
看看同一篇文章其它App是怎么处理的:
左边是网易云阅读,右边是网易新闻。两者的处理方式类似,都是通过程序的设置,微调文字的间距以补足右边存大的空白,区别是当标点出现在行末时,网易云阅读将标点外置,而网易新闻将标点放在了内部。
文字的对齐方式,可以用简单的代码实现:
Web App中,使用CSS类中指定justify属性值控制即可,以下为兼容性较佳的方案
.space-betw {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
原生iOS中,需为字符串对象设置NSTextAlignmentJustified
- (NSDictionary *)demoTextAttributes {
NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
ps.alignment = NSTextAlignmentJustified;
// here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
}
这个方法,结合之前我们通过栅格系统对字号和文本容器宽度的规范定义,终于可以避免App中常见的段落文字对不齐,对不准的老问题。
以上是实际工作中的经验总结,移动平台、硬件设备、字体本身都在不断变化,相应的设计方法也不会永远一成不变,但总的原则是不变的,那就是让内容更易读。
马海祥seo博客文章推荐:移动端界面设计的8个优化要点

我的更多文章

下载客户端阅读体验更佳

APP专享