【网易云课堂】从ios界面设计原则看设计

不知道平时做iOS端界面设计的同学有没有一些困惑,就是在做完一个自己还挺满意的界面时给身边的人看,总是会听到不同的声音,褒贬参半,这种时候是相信自己的审美?还是听取别人的建议?或是把各种方案糅合在一起?或许可以从iOS的界面设计原则的角度来看一下自己的视觉稿。

ios界面设计原则中最先阐述的就是以下三条:

清晰(Clarity):纵观整个系统,任何尺寸的文字都清晰易读,图标精确易懂,恰当且微妙的修饰,聚焦于功能,一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

遵从(Deference):流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容

进深(Depth):清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时,流畅的过渡提供一种纵深感。

可见这三条原则是我们在做ios产品时最基本的也是最重要的原则。其中清晰原则放在了第一条,则是重中之重,现在我们可以先根据这些原则审视下面这些产品的界面。

1.清晰&遵从

最左侧图片为“单读”app中二级类目选择页,旁边是同类型产品“片刻”的二级类目选择页,他们采取的设计表现形式很相似(都是在图片上覆盖半透明效果再叠上文字信息),但是给人的视觉感受却大相径庭。

左侧页面的标题字号大小舒适,字体也有别于其他同类型产品,增强了品牌辨识度,并且类目之间分隔清晰,不会给人凌乱感。

中间页面的类目分隔感较弱,紧贴在一起稍显凌乱,而且标题与辅助文字都过小,识别度较差,再加上此页面在iphone 7p设备上

都需要滚动6屏左右的长度,令人倍感焦躁。


在ios界面设计的三大基本原则之下,主要以动效、品牌化、颜色、布局和字体5个方面作为设计的着力点和出发点。以下将逐个进行介绍:

1. 品牌化

a. 优秀的app通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。

b. 不要让品牌化阻碍了优秀的应用设计。保证它是直观的、易于导航的、易用的并且以内容为中心的。

c. 内容比品牌化更重要。不要为了增加品牌曝光就牺牲了用来浏览内容的空间。

2.颜色

a. 在iOS,颜色能够暗示可交互性、增加活力以及提供视觉的连续性。保证这些颜色无论是单独还是组合、在浅色背景还是深色背景上都看起来很棒。

b. 考虑在app中统一使用一种关键色来暗示交互性。避免给可交互和不可交互的元素使用相同的颜色。否则用户就很难知道到底哪里是可点击的。

c. 在多种光线条件下测试你的app的颜色方案。以求在大多数的使用场景下提供最好的视觉体验。

d. 使用足够的颜色对比度。避免图标和文字跟背景分不开

3. 布局

a. 内容是你的最高使命。一般来说,具有相似功能的元素应该看起来相似。

b. 利用视觉权重和平衡来表示重要性。大的对象能够抓住人的眼球,也更易于点击,一般来说,把首要的对象放在屏幕的上半部分并且放在偏左的位置 ——处于从左往右的阅读环境时。

c. 缩进和对齐还可以表明多组内容之间的关系。

d. 为可交互元素提供足够的空间。尽量让所有控件都有不小于44pt x 44pt的点击区域。

4. 字体

iOS的系统字体英文是San Francisco[SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)]中文为苹方。此款字体较之前的Helvetica和黑体-简整体显得更为圆润,让阅读变得更加容易,这对于大屏趋势来说显得更为重要。

以上是对ios设计原则的粗浅的研究,纵观ios近几年的产品迭代,越来越注重效率,甚至会因此而折损视觉效果,设计师很难单纯从视觉角度提升产品的整体品质,更多的要在交互逻辑上下功夫,这将是接下来对ui设计师最大的考验。最后我想说的是:用户的需求是感性的,我们在做产品时要经常换位思考,多方权衡,不应生搬硬套这套原则。

ios还提供了更多的界面设计原则,比如ui控件、扩展、技术、资源等(此文中引荐的话原版均为英文,翻译拙略,请英文好的童鞋移步至此https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles)。

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

推荐阅读更多精彩内容