美文网首页
IOS交互设计规范梳理--一名电气电子工程师的不归路

IOS交互设计规范梳理--一名电气电子工程师的不归路

作者: 普通一般社会人 | 来源:发表于2017-04-04 23:44 被阅读117次

    iOS Human Interface Guidelines官方设计文档
    我的个人主页
    上大学前我的梦想是成为软件工程师,做出风靡全国的app,上大学阴差阳错和软件无缘,痛定思痛,大三开始学习web前端和iOS端,在拿了网易的一张证书,在电脑前想要做自己的app无从下手时,我才体会到,对于排版,布局和交互体验一无所知的痛苦。特此整理官方文档精髓,希望能给有和我一样经历的小伙伴一点微小的帮助。(简书markdown竟然不支持emoji表情,差评!)

    -"power" and "simplicity"-

    ”用简洁的方式表达有力的信息“是我对iOS设计文档的第一印象,iOS系统原生应用和它严格的审核机制保证了生态系统的一致性,从用户体验角度来说,不需要适应和学习就能够随意使用大多数iOS平台应用,它们和iOS系统,原生应用的使用习惯保持了协调统一,在UI风格上也没有特别明显的反差,如同一栋公寓里的不同住户,精装修,拎包即入的那种。只消跟着iOS的原生应用去做,保持字体,图标和用户界面的简洁度还是很容易保持的,但是如何做到使用这些元素去展现强有力的信息,突出内容的重点,就是另一个层面的内容了。

    -样式与内容-

    在文档中,苹果强调“ Deference”的概念,即顺从的意思,从我的理解看来,苹果是想让样式为内容服务,通过使用平滑的动效和精致的界面来辅助表达内容的意思,比如使用模糊和半透明来暗示内容还未完结,可以滑动查看,减少使用边框,渐变色,以及阴影效果来凸显内容的重要性(我觉得是因为这些效果容易分散用户的注意力)。
    在表达不同层级间的内容时,苹果建议使用“realistic motion”来展现app功能和内容的活力,帮助用户了解层级深度的关系,比如在开发中经常会使用的"Navigation Controller",就是展示内容间跳转的基本方式,在跳转查看更多内容时,还可以轻松回到原本的界面。

    练手时做的图片阅览demo
    -情感化设计-

    个人理解,情感化设计就是要让UI,交互符合用户使用app功能时的情感预期,用户行为预期也是情感化设计中的一环,比如在遇到错误时能够及时收到提示,并指明解决错误的办法,比如在进行服务器维护时告知用户维护范围,时长以及预计开服时间,在输入账号密码时采用不同的画面来让用户获得安全感(尽管使app更加安全大多数时候是安全工程师的责任,但技术层面的知识是大多数用户的盲区,而表现层又是与用户直接接触的,所以在表现层增加动效来抚慰用户情绪就显得尤为重要)。

    Bilibili客户端输入密码时捂眼睛的22和33

    在情感化设计时,最重要的一点是要让用户掌握app,提供给用户足够的操作性,比如在访问页面时,用户能够随时中断请求(即使请求早就发出去了,只是停止了页面的加载,或者向服务器发送一个取消操作的请求,回滚操作)。

    -样式保持一致性-

    ”一致性“在iOS的文档中,不仅指使用iOS提供的标准交互元件,还包括使icon功能符合用户预期这一”潮流一致“,为了能够减少用户的使用成本,代表基本功能的元件在大体上应当与流行款式无二,事实上如今大多数软件的功能icon下都添加了对应的文字描述,特别是底部tab栏。

    -手势操作-

    iOS默认提供点击,捏合,旋转,滑动,拖动,长按等手势,让产品设计者能够把一些现实生活中或者网络世界里的习惯带入到自己的app中,比如翻页,滑动返回,放大缩小,移动元件等操作,很多阅读类app也因为这些手势而能够最大限度的优化用户阅读体验,比如最近很火的《轻芒杂志》中的“杂志排版功能”(轻芒杂志是我见过的唯一一个不带状态栏的app,很大胆的尝试)。

    iOS提供的手势识别功能 轻芒杂志 杂志翻页效果

    值得注意的是,iOS还提供自定义手势功能,能够让产品设计者自行设计符合产品功能需求和用户心理预期的手势,个人觉得这一功能实际上在游戏中会经常遇到,比如可以用手势和路径检测来实现qte玩法,让用户在有限的时间里画出规定的形状等(并没有注意过,玩儿的游戏太少了,如果有知道这样使用的游戏,请一定留言,我要去体验一下效果)。

    因为iOS的设计规范还有很多,所以我会分次整理到这个文章中(如果太长的话我就新开一个),谢谢大家的阅读!

    相关文章

      网友评论

          本文标题:IOS交互设计规范梳理--一名电气电子工程师的不归路

          本文链接:https://www.haomeiwen.com/subject/yumzottx.html