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

作者: 木马简书 | 来源:发表于2015-04-22 09:55 被阅读5635次

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

    以下是整理笔记:

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

    案例:知乎,亚马逊

    『谢谢阅读:马赞赞』

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

    相关文章

      网友评论

      • upjasonchen:只讲了导航么?:no_mouth:
      • 738d56429555:如果之前对UI设计没有一点基础,仅是现在喜欢,不知道学起来是否有困难
      • 403f09898e78:点赞的理由很简单,就是文章里有我关注的话题,然后就一本书展开来说,简单,明了。。

      本文标题:移动应用UI设计模式 笔记整理

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