移动视觉与交互设计10项法则自查表

近年来,移动手机风靡全球。用户们也已经习惯依照一定的法则在移动端获取信息。在这个微渺的事物就可以定胜负的世里,开发者们需要去了解并迎合用户的高需求,以立足于此。

那么,你应该怎样设计去满足日渐高涨的用户期望呢?

如果转瞬间即可以有影响某款应用的事情发生,那么你可以预见的是,在这个移动领域立足并不是一件轻松的事儿。

在开发者中流传着一个真理,工具可以帮助你做简单的事情,从而让你集中注意力于那些困难与复杂的领域。如果你现在正在处于从 Web 设计向 App 设计的转型之中,那么你一定很难把握小与大的矛盾——当你要把页面做小,实际上所需完成的工作量会更大。

如果你尚处于困惑之中,我会告诉你这十大法则,包括五条视觉设计法则与五条交互设计法则。掌握了它,你在设计移动界面的时候就不会那样子捉襟见肘。

你是否遇到这样的情况?完成设计后,不知道该怎么去改进自己的设计方案;或者直到开发完成设计方案,才发现有一些显而易见的问题,但却一切却已成定局。如果你希望提高产品的设计质量,或者减少返工的可能性,满足用户越发挑剔的胃口,那么完成设计后,进行一次自检,是一个很好的习惯。以下是十大自检法则。

5 大视觉设计法则

苹果在用户体验层面开创了一个新的并充满惊喜的设计领域,它给我们提供了设计参考、样品 App,从而给我们这个时代拉开了一个不同以往的序幕。

同时,谷歌也未停滞不前,谷歌在对行业仔细观察并精准分析之后,成立了一种新的页面规则,并开创了新的用户系统应用于他们自主研发的手机上。

然而,苹果缺乏对移动端用户体验的视觉与交互方面的再定义,在这种情况下,移动应用的创始人们也在事实上进行了创新,从而生成了这十大法则,你可以在这十大法则的基础上去构建你的 App 。

1、合理布局,占满屏幕

人们都喜欢着内容充实的页面,因此,你大可不必对页面的画布进行节省。你可以将你要设计的页面看作一幅油画,而你是那个画匠。所以,尽情的将元素横向铺满整个界面并纵向平衡他们之间的关系吧,另外,在背景中加入一些肉眼可见的小惊喜也是不错的选择哦。

当然我们也并不是不需要留白,而是精心设计的留白,能够烘托主体物的留白,作为页面一部分的留白。而不是让页面看起来像主体物太小,或者构图不充分的留白。

2、删减杂芜

没有人喜欢杂乱无章的东西,特别是在移动屏幕这样一个仅有 4-5 寸大小的地方。在移动端,页面布局的杂乱会被用户们放大无数倍,所以,把用户最需要的最想看的东西呈现出来而将冗杂多余的元素删除是非常必要的。用户体验好的产品应当是简约的,你并不需要展现太多,过犹不及,刚刚好才是最恰当的。 主要检测是否是关键信息(帮助用户决定下一步操作的信息),避免类似重复信息(比如说有多个联系方式时候,放一个就够),少量的信息更加方便用户快速浏览,这里体现了少即是多的原则。

3.尊重用户习惯

为什么必须要这样呢?在移动端,像返回键、导航栏、菜单栏和顶部任务栏这种元素是每一款 App 都会有的,保持它们为相同的位置、大小是用户非常期望的事情。如果你没有把握完全创新将原有的用户习惯打破,你就必须遵从它。

4、使每一像素都臻于完美。

由于 LED、高清、手机显示屏可以影响用户对这款应用的体验从而影响他们的决策,“华丽”是游戏界面的代名词。你一定要确保你每一个 icon 的对齐与间距都是完美的。使用高分辨率的图像可以将应用完美的呈现在每一个显示器上。千万千万不要将不同的字体、字号和字体颜色混杂在一起,那样会显得很丑。检测字体,字号,字色是否太多?什么是多呢? 一个页面除了常规字体,最多出现一种强调字色。

5、忘记你网页端设计的经验

网页端已经统治了互联网太久以至于你很难走出网页设计的惯用思维中,你应该将你自己放到本土移动应用设计者的心态之中。事实上,尽管一些Web功能不应该存在于移动领域,可是他们仍然存在着。你可能会被诱惑去设计一个估计百万级体量的插件,但是当你调整插件场景时你应该谨慎行事。比如,不要做一个带着下划线的连接,不要做弹出窗口或者电台按钮,这些都不是为移动用户体验而设计的。

5大交互法则

在移动领域,有些理念是具有创新性的,交互设计就是这些理念之一。感谢苹果,让我们在交互与触摸体验中有了良好的范本。所以,我会围绕着这些告诉你交互设计五大法则。

1、考虑到触摸问题

移动用户界面是有一个可触摸并可与手指交互的规则的。所以,在移动应用设计上,你应该将每一个 icon 设计到恰当的可以容纳手指触摸的大小上,如果页面面积不够,你可以制作卡片使得手指可以充分接触并提供即时的反应。你要切记的一点是,悬停几乎对移动交互是不产生影响的。并且你千万不要忘记,在移动页面上,不能简单的将手指类比为网页上的鼠标。

2、滑动与伸展

在本土的手机页面中,不同页面相互影响是极好的的,所以,在完全的页面上让他们一起合作吧。比如下拉以刷新,滚动时隐藏标题等。让页面在任何方向上滚动变得容易。手势是预期的触摸接口,所以你可以用手来缩放,拉伸,捏动等。

3、微调过渡

房地产领域强调地段,而在移动手机领域却强调过渡。我们所要满足的不光是用户对“快”的需求,还有他们交互速度的需求。我们可以通过能见度的改变让用户的过渡感觉到很舒服,就像从下往上播放幻灯片一样。如果他们要按返回键,则过渡效果可以反向转换。

4、让加载过程变得优雅

因为在本土手机中,用户,速度,过渡和性能是无处不在的。在用户的心中,没有什么是比空白屏幕更可怕的。所以,你要确保你不会设计出空白的过渡屏幕。在过渡屏中展现一些东西是非常有必要的,不要让用户去等待。不要跳转内容,逐步加载,而不是批量的加载所有数据,从而使元素优雅的出现。

5、增加一些动效设计

除非它有魔术,在现实中,元素不会突兀的出现在任何地方。移动用户们喜欢看元素们到处动的样子。你可以不会魔法,但是你可以营造出一种幻觉。因此,使用动画,从而缓解突兀的感觉,并收集任何你需要的数据。

其实…你不必记住这些规则的

每当你认为你的移动页面设计的不好看或者感觉不对的时候,你可以来翻一翻这个自查表:

在设计夹后台回复 自查表 可以下载,记住,我们给你提供了为你做简单事情的工具,所以,你要集中注意力去攻坚克难了。(个人版是永久免费的)

这个表格不仅拥有一个令人难以置信的框架和用户界面,它是基于默认的所有规则。况且它也可以帮助缩短开发时间,所以你可以专注于那些可以满足用户期望的痛点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容