触动人心--设计优秀的iphone应用(上)

【本书针对人群--设计师/程序员/管理层/营销人员和客户,以及那些仅仅对iphone应用如何运作感兴趣的人】



“只有理解了如何造就触动人心的应用是,才会有更多触动人心的应用诞生”

iphone的屏幕很小,用户的注意力也游离不定,让每个像素都起到作用,每一次点击都富含意义,应用才能触动人心--换句话说,优秀的设计必须要有反复考虑过的想法、精炼的功能,有效的可用性和一定程度的个性化。明确应用要做什么-如何运行-如何将自己展示在受众面前。

/人类工程学角度/

1,一切从点击开始-我们是如何使用iphone应用的

简单易用是一个优秀设计的品质保障,确保每一张页面、每一个行为都能传递欣喜,提高效率并能达到目标,让每个元素都能触动人心。

2,能触动人心吗?-精心设计你应用的目标

思考:你的应用与众不同的为用户解决了什么问题?

--确定受众-满足此类人的需求- 不断提供新内容与受众维持长期关系

--对功能取舍和展示方法要深思熟虑,对移动场景要精心构思

--拇指规律:虽然拇指能划到整个屏幕,但只有三分之一的屏幕事真正容易触及的—也就是拇指正对的区域。为了获得人类工程学上舒适的体验,你应将主点击目标放置在方便拇指点击的区域内。同时根据应用最常发生的用例来排布页面元素,引导点击

--简洁是移动设备设计中最重要的一点,在混乱的局势下,设计更要简洁

书中用了Twitter的案例,Twitterrific 2 的项目负责人说:

--如何把应用做的简单,又要给有需求的用户一些附加功能,同时不能对用户百依百顺,在一个应用里,功能越多,用户界面就会越复杂,最后功能就会失控(私以为前段时间的支付鸨就是有点失控了)

/敏锐的设计/

—点击友好指南:(帮助迅速搭建动人、有效、可用的布局设计)

1,将重要的信息放在顶部,重要的操作放在底部:屏幕底部是掌上设备拇指点击最舒适的区域,但也是最容易被手挡住的区域,为了方便看清信息,信息应该摆放在应用操作的上方--遵循主操作在下,主内容在上的原则。

2,基于44像素的设计韵律进行设计:iphone主屏上的图标排列杭高为88像素,主屏按着44像素设计韵律所设计。

3,质疑滚屏:尽量一屏显示完,避免滚动条

优秀的应用一定是会竭尽全力去减少在操作时不必要的思考。界面没有滚屏将减少脑力消耗,同时使此设备更像一个现实设备,而不是一个虚拟设备。固定的屏幕给人牢靠的感觉,简洁胜过繁密,

不管最后决定要不要用滚屏,都要用怀疑的态度对待滚屏。

4,尽量减少屏幕上的元素:只添加一个小图标好似无害,但屏幕上每个元素都会消耗用户的认知成本。每个元素都会减慢视线扫描,减缓理解时间和决策时间

5,将高级工具和操作藏起来:可以隐藏,但要便于操作,又或者用一种可见的方法将隐藏边框界面放在同一平面上。因为,无论你的应用有多复杂,都要保持界面在视觉上的简洁,界面控件有限,要严格审核每一个功能点和操作,然后在放到应用中,确保“触动人心”。同时注意确保防止的位置直观易找。

本章小结:

· 人类工程学问题:要考虑应用的手感

· 要将主操作放置在拇指的“点击热区”中

· 44是个神奇的数字。确保点击区域至少有44像素大小,然后基于44像素的设计韵律进行设计

· 大胆使用空白。不要让设计显得拥挤不堪

· 主要内容在上,主要操作在下

· 主操作要容易够得着,在切实可行的情况下避免使用滚屏

· 用“秘密面板”、“隐藏之门”将高级工具分散到次级视图中,以此来减少边框界面


/有条不紊/

《iphone人机界面指南》—iphone Human Interface Guidelines(http://developer.com/iphone可下载)

--苹果的导航模型

--平铺页面,随意翻动,即能改变应用的基本设置,用户只有一个主屏的简单应用,适合在实用工具中使用,适合浏览并发现方式。文章中用了正面反面的例子:主要信息“正面”展示,简单设置“背面”展示。

优缺点:

· 适合少而精的内容,适于随意浏览的页面——每次只能翻过一页,没法立即跳到非相邻页

· 适于内容自定义,且数量可变的页面——不能适用于较多的页面数量,页面指标器智能容下20个点

· 易于使用,只需熟悉的滑动手势即可导航——难以包含滚屏,对长文本不利

· 界面占用空间少,页面分页控件只占用一点空间,给内容留下很多余地——页面指示器太小,可能被用户忽略,因此让用户错过应用的其他页面

--标签栏,点按按钮,切换页面

优缺点:

· 点击一次即可访问到应用所有的主要功能——指鞥现实5个标签

· 标注清晰的菜单,告知用户主要功能和当前所在的功能——应用的每个(或大多数)页面都会被明显占据一定的屏幕空间

--树形结构,在有层级的分类选项或分类内容中向下细分

优缺点:

· 能应变大量的类别、功能和项目,组织方式常见且容易理解——主功能只有在最顶层页面才会被显示出来,不像标签栏,每个页面都清晰可见

· 可直接对内容进行交互,直观且占用屏幕空间小,列表展示很适用于用户自定义分类——主要功能和分类直接切换有些麻烦,必须要先回到顶级页面,然后再依次 点入

--沉浸式应用,一般应用于全屏且图形丰富的应用,比如大部分的手机游戏

--组合使用导航模型,在应用内容活功能繁多的情况下,混搭导航可以克服单个导航模型的短板

书中同时提到:制作原型,先纸上画出模版,本着做草稿的心态,而不是做设计,主要工作是理清概念。需要哪些页面、每张页面有什么操作、页面工具和内容的比例等,起初要注意组织好页面和任务优先级。

本章小结:

· 遵循普通,不见得别人就会觉得很普通。要有“苹果味”的设计感。

· 苹果内置的导航模型基本可以解决大多数应用的结构问题,要理解好每种导航模型的优缺点,而后再选用一种最适合你的导航模型:平铺页面、标签栏、树形结构。

· 把页面都画成故事板,用这种方式来规划应用的清晰流程。先别考虑细节,刚开始最重要的是大局。

未完待续


互联网产品狗,设计类大四学生,有幸在大厂实习结束,滚回学校做毕设。期间开始梳理实习期间学到的一些知识和技能,同时开始写自己的读书笔记。

微博:czy爱吃咸蛋黄

个人微信公众号:czy爱吃咸蛋黄(xian-dang-huang)    

欢迎勾搭(我不会告诉你们公众号发的那篇,按照惯例会有照片)

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

推荐阅读更多精彩内容