阿拉丁

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

案例:知乎,亚马逊


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

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









评论

热度(11)