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


转自:设计夹(ID:sezign)

英文:medium

译者:孙怡娜

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

Photo by Medium

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

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

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

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

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

 

5大视觉设计法则

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

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

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

1.合理布局,占满屏幕

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

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

2.删减杂芜

没有人喜欢杂乱无章的东西,特别是在移动屏幕这样一个仅有 4-5 寸大小的地方。在移动端,页面布局的杂乱会被用户们放大无数倍,所以,把用户最需要的最想看的东西呈现出来而将冗杂多余的元素删除是非常必要的。用户体验好的产品应当是简约的,你并不需要展现太多,过犹不及,刚刚好才是最恰当的。

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

3.尊重用户习惯

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

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

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

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

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

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

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

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

5大交互法则

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

1.考虑到触摸问题

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

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

2.滑动与伸展

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

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

3.微调过渡

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

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

4.让加载过程变得优雅

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

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

5.增加一些动效设计

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

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

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

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

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

关注UI设计达人』

看更多精选UI设计文章

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

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/33808/

(0)
TinadminTinadmin
上一篇 2017-08-01 02:19
下一篇 2017-08-01 03:13

相关推荐

  • 2017年交互设计的10大趋势

    UI 设计的趋势是变化非常快的,有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声,Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。01. 沉浸式的全屏视频Campos Cof…

    2017-08-02
  • 实例分享:交互设计如何赋予产品安全感

    作者:高广淦全文共 4235 字,阅读需要 8 分钟—— BEGIN ——做互联网金融交互设计的这两年,也算是用过上百款竞品了。尤其是一开始做设计的时候,满世界的下载注册体验竞品,以至于我这两年的投资收益还是很可观的,…

    2017-08-04
  • 手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇…

    2017-08-03
  • 为什么我推荐使用Flinto做高保真交互设计稿?

    静电说:其实Flinto并不算一个新鲜的工具了,但是感觉在设计师中的流行程度并不高,可能是这个工具一直很低调的原因吧。在16年初,Flinto还只是个可以做连连看的工具,跟其它同类型的工具并没有太多的区别。但是随…

    2017-08-01
  • 史上最完整交互设计基本原则|推荐收藏

    下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设备都是有用的。有效的用户界面是视觉明显的并且宽容的,会带给用户一种控制感。用户能很快…

    2017-08-01
  • 认知心理学与交互设计(1)--识别容易,回忆很难

    ♝点击上方“交互设计学堂”关注我们,送电子书这是一个新的系列,主要内容来自《认知与设计--理解UI设计准则》,经过重新整理并加入一些自己的思考。识别和回忆是记忆的两个重要功能,识别是指根据记忆对某个物体做出…

    2017-08-01
  • 常逛这3个交互设计类网站,轻松get设计技巧和灵感

    DribbbleDribbble是一个著名的UI设计、交互设计社区,许多设计师寻找灵感,与设计师同行进行交流切磋等都会到这里来。 它面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查…

    2017-08-02
  • 【交互设计】信息图(infographic)的圆形表达

    信息图形(Infographic),又称为信息图,是指数据、信息或知识的可视化表现形式。信息图形主要应用于必须要有一个清楚准确的解释或表达甚为复杂且大量的信息。公元1958年,Stephen Toulmin提出了一种图形化的理论…

    2017-08-01
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 浅谈用户体验设计

    这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。 这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出…

    2016-06-05