zoukankan      html  css  js  c++  java
  • 谈谈常见的移动应用设计风格

     

    Tabs流

    现在最流行的设计风格莫过于经典的TABS风格,下面是某种Tabs设计的实现:

    [---TITLE---]

    [---CONTENT---]

    [---TABS---]

    优点

    就是,布局清晰明了,功能切换方便,用户学习成本低,毕竟主要功能都在tabs上,只要会点击按钮都会用这个应用,而且,大部分应用都是这样,是绝对的易上手风格.

    缺点

    烂大街的设计风格,没法给人耳目一新的感觉,而且存在一个问题,就是屏幕利用的浪费,因为tabs一直占用着底栏,有时候,我们可以思考一下是否必 须要常驻?接着就是功能数目与tabs数量的冲突,有时候,我们一个应用有很多一级页面的功能的,有些人就像把它全部放到tabs里面,就不tabs摆放 得密密麻麻的,有密集恐惧症的人估计,永远都不会用这样的应用了.目前的趋势是tabs 不断做减法.

    参考

    微信,QQ,Appstore

    Tiles流(metro?)

    类似于flipbard的那种风格的,我称之为砖块流吧,我的意见是砖块设计风格是用来解决tabs数目过多而出现的一种设计方式,这种设计的逻辑 应该是,当我们一个应用的功能很丰富无法每个功能看上去都是很好用不好决定哪个功能作为默认功能的时候,这时候,我们往往把这个抉择交个用户.下面是某种 Tiles设计的实现

    [---TITLE---]

    [--[TILE]--[TILE]--]

    [--[TILE]--[TILE]--]

    [--[TILE]--[TILE]--]

    ...

    优点

    解决了应用功能非常之多如何对用户的解释的问题,让用户能够一目了然的在众多砖块里面选择到自己需要的功能

    缺点

    功能间的切换不方便,例如,一个用户在用功能A的时候,想回头使用功能B,就需要先返回再选择功能B,然后,想用功能A的时候,再返回,在选择.如果一个功能的层级有3层,要切换功能就要返回 多次.使用这种风格的应用,切记一个功能的层级不要太深.

    参考

    flipbard,zarker

    Change流

    关于这风格的名字着实思考了很久,现在这种风格并不多见.这种风格可以看做是Tabs流和Tiles流的某种合体的实现,上面提到Tabs流的风格 存在无法展示过多功能,Tiles流无法存在无法暂时默认页面,功能切换麻烦.而Change流正好把这两点给克服了,下面是某个不存在的应用(g+)的 Change设计的实现

    [---Control---]

    [-[--LeftPage--]-[--MainPage--]-[--RightPage--]-]

    现在这个图样,估计不好了解,这里得特地说明一下,Change的设计风格,它把原来的title栏,改造成了可以用于进行交互的 栏,android称之为actionbar,为了大众一点我把它改名为控制栏,把title栏改造成控制栏的一个好处就是能够进行一定的交互,有人可能 会问,tabs流和tiles流的title栏就不可以进行交互了?这里所说的交互是贯穿于整个设计,例如filpboad 的title栏位,可以用作看作用户详细信息,但是,这个已经脱离设计以外了,它本质还是一个用于展示当前标题,只不过,在上面添加了一个功能.

    说了这么久这个control栏有什么特别的地方呢?control栏可以说是把tabs风格在tiles风格架设了一个桥梁,使一个继续既然 tabs的功能间方便切换,也能像tiles那样有丰富的功能进行选择.这里的实现,就是把我们的主前端分成了三个page,MainPage保留了 tabs 的功能默认暂时,LeftPage则实现了tiles 级别的美观的功能选择显示,而右边的页面可以做对MainPage的一些补充显示.

    优点

    拥有tabs和tiles风格的优点,去除了它们的缺点.

    缺点

    对于大屏手机的操作不方便...

    参考

    不存在的应用: g+,facebook

    最后

    貌似写的挺多的,觉得不错,有就顶一下吧,如果,有不同见解,回复讨论!


    作者:游戏阿柴
    出处:http://www.cnblogs.com/youxilua
    本文采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
    微博联系:新浪微博
    用支付宝赞助博主:http://me.alipay.com/youxilua

  • 相关阅读:
    Mysql Group by week
    查询数据库占用磁盘大小
    菜根谭#117
    菜根谭#116
    保护眼睛颜色的RGB数值
    手动释放linux内存和缓存
    菜根谭#115
    菜根谭#114
    菜根谭#113
    spring mvc静态资源文件的引用
  • 原文地址:https://www.cnblogs.com/youxilua/p/2894036.html
Copyright © 2011-2022 走看看