阿拉丁

移动应用UI设计模式笔记整理

马赞赞:

在大学的时候,对交互设计和UI设计的理解只局限于手机上的APP,网站之类的不在其中。理由很简单,网站页面设计早就有了,而且之前大家都把网页设计师叫做美工(心里很抵触这种叫称呼)。而UI设计和交互设计好像是伴随智能手机出现的。之前的这种理解肯定是错的,不过我的心中埋下了想设计手机APP的种子。《移动应用UI设计模式》是一本快速了解手机应用的工具书。它把手机应用的归类;拆分成十个部件,再详细介绍每个部件。

以下是整理笔记:


1-导航设计

1.1-选项卡式-Tab Munu:选项卡式的导航在很多机型里都有不同的体现,这里只列举IOS和Android作为案例;优点:这是一种常见的导航,倘若应用要用户在不同分页里频繁切换,就用这类导航缺点:是会占用一定高度的空间。Android的这个形式看上去很熟悉,因为模仿了网页导航模式,是PC端遗留的产物。这种方式不利于大屏手机单手切换操作

案例:IOS - App Store,Faebook , 微信

案例:Android - 主题商店和应用商店

看出IOS与Android的区别了么?


1.2-舵式导航:本书里没有介绍,自行添加的。舵式导航应该属于标签卡式导航的一种延伸。中间的标签作为重要且操作频繁的入口,一般都用图形或颜色凸显出来

案例:微博,Path,Instagram


1.3-列表菜单式 List Menu:这种导航有很多种变化形式,包括个性化列表菜单,分组列表,和增强列表(Enhanced List)等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。列表菜单合适显示较长或拥有次级文字的标题

案例:小米手环,VPN,iPhone手机系统设置


1.4-跳板导航 Sringboard:跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。有时也被称为“快速启动板”(Launchpad)。跳板式导航的特征是,登录界面中的菜单选项就是进入各个应用的起点

案例:支付宝,爱奇艺

可进行位置上自定义,看案例中的橙色与蓝色的分布就是自定义的结果。对比一下自己的手机看看


1.5-陈列式 Gallery:陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示

案例:厨房的故事,Dribbbler,Pinterest


1.6-仪表式-Dashboard:仪表式提供关于一种度量KPI(关键绩效指标)是否达到要求的方法。主要应用:商业应用,分析工具,销售,和市场应用

案列:AT,Overiew


1.7-隐喻式:用页面模仿应用的隐喻对象。主要用于游戏,同时在帮助人们组织事物(如日记、书籍、红酒等),对其进行分类的应用中也会用到。随着扁平化的流行,隐喻这种偏向拟物的设计渐渐成为过往,锤子的手机应该会有很多案例

案列:印象笔记,DailyCost


1.8-超级菜单:在选择导航模式之前,先确定信息架构。如果导航对象只有少数内容,就可以使用选项卡之类的导航模式

案列:RipCurl


1.9-抽屉式 :抽屉导航特点是菜单隐藏在当前页面之后,只要点击入口就能将它拉出来,此类导航好处是节省页面展示空间,有利于用户注意力在当前页面聚集,可以应用在不需要频繁切换内容的应用上,以对设置、内容进行隐藏。此类导航设计务必提供菜单画出的过渡动画

案例:知乎,亚马逊


后续更新:表单设计,表格设计

感谢阅读:马赞赞 (●—●)









我的书单

马赞赞:


交互设计

  1. 《交互设计精髓》作者:Alan Cooper  推荐指数:★★★★★

  2. 《用户体验五要素》作者:Jesse James Garrett  推荐指数:★★★★★

  3. 《设计心理学1,2,3》作者:唐·诺曼  推荐指数:★★★★★

  4. 《破茧成蝶》作者:刘津  推荐指数:★★★★★

  5. 《点石成金》作者:Steve Krug  推荐指数:★★★★★

  6. 《简约至上》作者:Giles Colborne  推荐指数:★★★★☆

  7. 《移动应用UI设计模式》作者:Tberesa Neil  推荐指数:★★★★☆

  8. 《设计之下》作者:搜狐UED  推荐指数:★★★★☆

  9. 《赢在用户》作者:[美]Steve Mulder 推荐指数:★★★★☆

  10. 《在你身边为你设计》作者:腾讯CDC  推荐指数:★★★★☆

  11. 《触动人心:设计优秀的iPhone应用》作者:Josh Clark  推荐指数:★★★★☆

  12. 《UCD火花集》作者: UCDChina   推荐指数:★★★★☆



产品相关

  1. 《人人都是产品经理》作者:苏杰  推荐指数:★★★★★

  2. 《启示录》作者: [美] Marty Cagan  推荐指数:★★★★★

  3. 《激荡三十年》作者: 吴晓波  推荐指数:★★★★★

  4. 《门口的野蛮人》作者: 作者: 布赖恩·伯勒 推荐指数:★★★★★

  5. 《长尾理论》作者: [美] 克里斯·安德森  推荐指数:★★★★☆




设计思考 

  1. 《王受之设计系列理论丛书》  推荐指数:★★★★★

  2. 《设计中的设计》作者: 原研哉   推荐指数:★★★★★

  3. 《设计诗》作者: 朱赢椿  推荐指数:★★★★★

  4. 《设计改变一切》作者: 蒂姆•布朗  推荐指数:★★★★☆

  5. 《一线之间》作者: 哈特姆特·艾斯林格   推荐指数:★★★★☆  

  6. 《佐藤可士和的超整理术》作者: 佐藤可士和   推荐指数:★★★★☆




社会学及心理学:

  1. 《心理学与生活》 作者:[美]理查德·格里格  推荐指数:★★★★★

  2. 《对伪心理学说不》作者:基思•斯坦诺维奇  推荐指数:★★★★★

  3. 《社会心理学》作者:[美]戴维·迈尔斯  推荐指数:★★★★★

  4. 《乌合之众》作者:[法]古斯塔夫·勒庞  推荐指数:★★★★★

  5. 《人格心理学》作者:霍华德S.弗里德曼  推荐指数:★★★★★

  6. 《消费者行为学》 推荐指数:★★★★★

  7. 《格调》作者: [美] 保罗·福塞尔  推荐指数:★★★★★

  8. 《菊与刀》作者: 作者: (美)鲁思・本尼迪克特   推荐指数:★★★★★


后续继续补充《》···

感谢阅读:马赞赞 (●—●)

  



破茧成蝶读书笔记

马赞赞:




 

适合人群:菜鸟及交互新手

推荐指数:☆☆☆☆☆

读后感受:破茧成蝶是我读过的最通俗易懂的专业书之一。整本书陈述笔调类似知心姐姐。分别告诉读者怎么入行,用户体验包括哪些内容,有哪些流程和关于设计师的自我修养等等方面内容。书中用的都是实际项目中比较好的案例,对于还没有接触到规范流程的设计师来说,可以吸取经验,弥补不足。

整理的笔记:

一,设计师前期菜鸟入行

1-学好做人,接人待物,语言沟通,谦虚礼貌,戒骄戒躁。也就是爸妈小时候教导我们的那些。这是做任何事情的基础,个人也表示强烈认同。不然本事越大祸害越大

2-专业技能,阅读专业书籍,阅读行业相关博客,了解行业行业大事,掌握相关软件。

3-项目经验,多做项目(在校生赶紧找实习);研究产品(为什么这么做,换成你怎么做);多总结只好是用文字记录下来。


二,专业技能设计流程

1-需求分析

1.1-需求角度:商业利益;用户角度;项目角度。

1.2-产品定位:1.2.1-产品定义/产品经理:使用人群(白领);主要功能(播放音乐);产品特色(清晰);

                     1.2.2-用户需求/设计师:目标用户:(休闲型/小资型/达人型;权衡用户规模和商业价值选择目标用户);

                                                     使用场景:(上班路上/工作时候/睡觉前);

                                                     用户目标:(快速找到流行音乐/音质好/只听某一类)。

1.3-需求哪里来:用户调研;竞品分析;用户反馈;产品数据。

1.4-需求分析/筛选:挖掘用户目标;匹配产品定位;考虑项目资源/定义优先级。

1.5-了解需求文档:文档修改与审核记录;

                           目录;

                           背景描述;

                           用户类型和特征;

                           项目时间安排;

                           信息结构;

                           业务流程说明;

                           需求详细说明。

2-设计规划

2.1-信息归类:逻辑归类:男装>上装>T恤;

                      卡片归类:邀请用户把类似的东西放在一起(开放式,封闭式)。

2.2-引导任务(相似性/方向性/运动元素指引向导控键)。

2.3-简化操作(减少冗长步奏/复杂造作转移系统)。


3-设计实施

3.1-纸面原型:快速表达想法/提高效率/节省时间;可以结合POP;快选手机应用使用。

      电子原型:低保真原型(可以是纸面原型,也可以是软线线框图);

                        高保真原型(在外观和操作和最终产品一致);

                        工具(Axure / Visio / PPT)。

     原型内容:变更日志;任务流程/页面流程;信息结构;交互说明


4-项目跟进

4.1-设计评审

4.1.1-设计评审目的:

                               检验目标:既定产品定位设计目标是否实现;

                               发现问题:各方面角度对设计提出观点;

                               达成共识:顺利进入下一个环节;

                               事先考所有的可能性;准备设计依据;

                               会议邀请。

4.1.2-评审主导流程:

                               明确设计方向;

                               阐述设计分析;

                               展示设计设计方案;

                               引导讨论;

                               提高效率,控制话题;

                               思辨的手机反馈价值。


5-成果检验

5.1-视觉阶段:

                       对交互理解是否正确;

                       视觉发挥监督;

                       视觉主次关系;

                       交互细节标注;

                       审美不要过分关注。

5.2-开发阶段:同一规范和标准:字体大小/尺寸/间 距。

5.3-可用性测试流程:

                               设计任务:反应核心操作的任务/给出引导目标/符合操作流程;

                               招募用户:5名左右代表用户;

                               进行测试:观察操作/现场反应/使用场景/报酬;

                               分析问题:找出找出问题优化。

5.4-A/B测试:

                     定量分析:

                                     同一用户同一页面;

                                     同版本同时测试;

                                     单一变化;

                                     灰色发布。

                       反馈:web:意见反馈/在线客服; 移动:应用商店评论

                       更新: 内容/功能/使用流程/设计/新功能/现有BUG


三,设计师的自我修养

3.1-对设计充满兴趣;有天分;执行能力;情商高;超出预期;有条理/上进;分享与总结。

3.2-为谁设计:平衡商业价值与用户需求,通过自己的专业水平为公司,用户创造最大价值、


最后附上导视图


感谢阅读:马赞赞 (●—●)