想搞定移动端 App/网页设计,你起码要做好这些事情

如果你曾仔细观察过近些年来那些优秀移动端产品的交互设计,会发现它们都拥有一个共性:它们在基本的功能和设计上的执行都相当的完美。它们从最基本的人类行为模式中汲取营养,然后通过优秀的设计和执行,为用户悄无声息地扫除了所有的障碍,这个时候,用户会感受到其中惊艳的视觉效果和突出的互动体验,其中尤为突出的就是浏览体验。今天的文章,就让我们一同来梳理一下,有哪些关键而核心的移动端设计项目,总结一下今天移动端设计的“核心考点”(作者: Nick Babich )。

有效的排版设计

不论你所设计的是网页还是APP,其中的文本构建起了用户和你的产品之间的明确关系,所有的文本都在帮助用户抵达他们想要的那个目标。所以,排版设计在交互中扮演着相当关键的因素。文本的大小和屏幕上的整体布局设计,对于用户的阅读体验有着巨大的影响:当文本过小,而行间距和字间距也比较紧凑的时候,用户需要更长的时间来对内容进行识别,而许多用户干脆会跳过其中的许多内容。在移动端上出现这样的问题之时,则显得更加严重:过小的字体在一块明亮的小屏幕上显示,低下的识别度和炫光让用户更加头疼。排版对于移动端用户而言,影响更大。



移动端的文字排版的核心技巧在于,平衡易读性和空间利用率。当你在为移动端界面设计文本排版的时候,需要选择合理的字体尺寸和间距,这两个因素是最关键的影响因素。字体尺寸需要足够大,确保绝大多数的用户能够识别,而足够的间距则保证小界面上内容的呼吸感,不会让人觉得局促。当然,这些是底线,字体和间距并非越大越好,适中而舒适才是最终目的。



iOS 平台上Medium 的客户端的字体和间距的设计就是很好的参考范例。

小贴士:为了确保移动端设备的可读性,英文文本控制在每行3040个字符,中文文本控制在20个字左右。如果是在桌面端,英文字符通常控制在6075个字符之间,会让人阅读起来比较舒适。

简单的配色方案

色彩是视觉设计中最复杂的部分。太过繁复的色彩有时候会让用户感到不适,简化配色方案往往能够很好的提升整体的体验。学会对复杂的配色方案说不吧。如果简单的配色方案让你的设计看起来略显单调,不妨通过新增现有色彩同色系不同饱和度、明度的色彩,生成丰富而不至于繁复的配色方案。


蓝色的单色调配色方案

下面的APP的设计案例采用的就是单色配色方案,通过同色系不同色调、饱和度的色彩来构成一个紧凑而不单调的配色方案。


小贴士:从零开始创建配色方案有很多技巧,本身并不复杂,可以参考我们的文章、借助合理的工具来创建配色方案。如果现有的配色方案本身比较单调,或者整体偏中性,那么不妨增加一种明亮的色彩,让它能够更好的吸引用户的注意力,简单又不失个性。


基于内容的卡片式导航模式

不管你想在你的应用或者网页中呈现什么样的内容,你总是希望你的用户能够仅可能方便、完整地体验到它们。基于内容的导航模式的思路在于,尽量让内容的概述和详情两种状态能够无缝地切换,而卡片式设计和这种设计模式最为搭配,因为卡片式设计能够统一而自由地组织内容,并且很容易消化大量不同类型的内容:

  • 卡片将用户划分成更有意义的区块,让屏幕的利用率更高。就像不同的文本段落组成文章一样,卡片式设计将不同类型的内容用卡片承载着,构成连贯的信息流。
  • 卡片是为移动端触摸交互而生的。用户无需学习就能够直观而自然的点击、滑动、翻转卡片交互,这是基于现实世界的物理规则的设计。

小贴士:想要让界面真正意义上地“隐形”,那么就专注于内容吧。

层次与深度

桌面端和移动端之间最明显的差异大概就是屏幕尺寸的大小了。由于移动端设备屏幕尺寸上的局限,越来越多的移动端APP设计开始试图在界面层次和深度上做文章,让界面拥有“厚度”,在原有的平面上增加一个“Z轴”。


图层让界面拥有了深度,让体验更加真实

分层式的界面设计甚至成为了Google的Material Design的核心设计原则,它参考了现实世界中人们同不同的物体进行交互的方式,将这些物理法则融入到界面交互当中。表层和投射在背景中的阴影则在界面层次中起到了重要的作用,它将不同控件和元素分隔为不同的层。



分层界面中最常见的元素和特征:
  • 浮动的操作按钮。通常常用的、推荐的操作被集成在这些浮动按钮中,通常你需要点击界面顶端浮动的一个圆形按钮来展开全部的浮动操作按钮。


  • 放大和展开。在分层式界面当中最常见的一个例子,就是当你点击列表中一个条目的时候,就会展开呈现其中的细节,随后你还能返回收缩让你看到完整的列表视图。
1-8eNNKLircgLedz0zxcR9oQ

·置顶导航。保留必要的菜单,当用户操作的时候,常驻屏幕顶端,便于操作。


1-d1qeokxxXTleNHiyytC0Mw
  • 典型的弹窗。就像桌面端的弹出式提示框那样,叠加在现有界面上的提示框,让用户登录、提示信息,甚至是展现广告。


小贴士:简化你的流程,每一屏最好只用来做一件事情。

熟悉的手势

基于手势的移动端交互,改变了我们同智能设备沟通和操作的方式,屏幕不再只是单纯的触摸点击的目标,更为复杂的滑动和多点触控让手势操作带来了更多的可能性,从缩放、返回到删除,我们可以进行的操作越来越多,一些约定俗成的手势操作规则也逐步成型。


越来越多的APP开始依赖手势操作,而屏幕上的按钮也越来越少,为有价值的内容腾出了更多的空间。这样一来,APP本身也越来越专注于内容的呈现。


1-g-MHVlWPL1RF1W4UZIk6Qg

小贴士:当我们谈及标准化的手势操作的时候,其实也是在强调手势的“直觉性”和通用性。当你想要在手势操作上玩创意的时候,最好三思而后行。手势操作本身带有一定的隐藏性,所以,如果没有一定的视觉引导,用户可能会感到迷惑,不知道要如何同APP进行交互。

功能性的动效

这里所说的功能性的动效指的是那些嵌入到用户交互流程、使用过程中的微妙的动效设计。它们充当界面和交互之间的协调人和连接器:

  • 提供视觉反馈:



    当用户看到这些作为触发反馈的动画效果的时候,就明白他们的操作完成了。

  • 平滑过渡,让用户注意到改变:



    图标的变化在不同的阶段可以起到不同的效果。

小贴士:微妙的动效能够巧妙的连接不同的界面和状态,提升用户体验。但是千万不要滥用动效,专注体验,而不是为了使用动效而添加动效。

结语

不得不说,随着技术的发展和经验的积累,现如今的移动端设计充满了套路。能够脱颖而出的优秀设计虽然各有特色,但是在基本的设计上,都一样的优秀。就像我们今天总结的,干净的界面、简明的配色方案、赏心悦目的动效和布局,这些基本功做好了,然后才是探索属于自己的特色。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,472评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • “这个世界不会因为你有欲望,就扔给你十亿美元,也不会因为你努力工作,觉得你值得十亿美元(这个世界不会关心你想要什么...
    山峰阅读 384评论 0 1
  • 路太远, 脚却短, 一步仅有三尺宽。 心意寒, 梦缠绵, 何处孤芳自留联。
    唉喝水压饿唉阅读 161评论 0 0
  • 每一个人不能总在原来的地方原地踏步,不能总看一朵云、一片天空;触摸一片叶子、一只蝴蝶……我们要敢于迈出一步去...
    婷宝_ce9f阅读 148评论 0 0