|
一，遇见的问题 在做手机客户端的时候常遇到这样的问题：用户要进行一层一层的选择列表。 来看一个比较极端的例子：比如一个手机上的超市APP，用户通常是先有一个大类的选择：“日用品，衣服，食品……”，选择了食品大类之后，有一个小类选择：“食用油，禽蛋，酒类……”，选择食用油小类后又有一个细类“大豆油，花生油，橄榄油……”，选择花生油细类后，还有具体的品牌类“鲁花，金龙鱼，福临门……”，天啊，用户要疯掉了，已经4级页面了。通常我们会怎样做呢。 比较常见的做法是这样： 然后配以整体页面的左右滑动切换。当然这个例子比较极端，通常产品人员会进行这样或那样的优化使选择的页面更少更简洁。比如我们可以把下级列表项前置，做一个长的选择列表，让用户一直滚动；还可以在界面上安排重点推荐区来直接显示最后的某个品牌，……。这里我们不讨论产品结构上怎么样优化，假设这些选择不能再优化了，能不能找出更好的方法呢？ 换一个更炫的页面切换动画？下一级类别延续上一类别选中项的色调？……，这些都可以，但是总觉得没有整体解决问题，或者自己的思维感觉总是不那么圆润。呵呵，先暂停一下，说说另一方面的事：灵感。 二二，灵感触发 我的设计经验是这样的：在设计一个东西的时候，不论是设计技术架构或者设计用户体验，会追求思路上的饱满，通畅。男生像修炼到武功大圆满境界，意念通达；女生像看到完美的珍珠，又大又圆，表面浮动莹莹的珠光。 我不喜欢在“点”上解决问题。比如：这个按钮放的位置不对，这个动画不够炫，把xx做的突出些，……。这样的解决，单独看也许不错，甚至很不错，但是只有一个两个这样的“点”还好，如果多了，合在一起是什么样子呢？ 我也不喜欢“高调”处理问题。经常会听到：我们就要简约；我们就要省心；我们要给用户情感，……；ok，如果你问这些所谓的“简约，省心，情感”怎么做，恐怕答案多半是“我如果知道还要你干嘛”。 设计应该有这样一个思路：知道这个思路需要什么，哪些虽然不错也不能放进来，有了取舍标准；知道这个思路由那些元素组成，能够分解；知道每个设计之间的联系，有了纽带；知道这个思路适合表现那种东西，不适合表现那种东西，有了边界，总之所有设计有了归属。这个思路应该是圆润的，不然做着做着就卡壳了，要不即使现在不出问题将来也会漏洞越来越大，思路做到圆润会发现自己像指挥家一样，驾驭着每一个音符。 说了许多，貌似飘远了，马上说灵感。 我还有一个习惯，设计的时候不喜欢参照同类的软件。因为每个软件对问题空间的抽象都不尽相同，另一方面国内的大多软件都只能看到“点”。我喜欢去生活中找寻灵感。比如在银行等待的时候，观察不同银行的服务窗口设计，琢磨它们之间的差别和自己银行特色的贴合；坐地铁的时候，留意通道中指示牌的设计；给老婆买衣服时，体会这件衣服设计师想表达的情感；走路的时候看着地面路砖的排列和走路快慢对路砖的视觉变化，很多很多。原来我们身边环绕着无数个设计大师。 回到上面提到的问题，一层一层的页面，很讨厌，这简直“生生不息”啊。一天上班，无意中看到路边的小草。小草冒出来，草地绿了。拍了张照片： 草绿了，春天来了，同样是“生生不息”，给我感觉很欣喜。为什么同样的“生生不息”一种感觉很讨厌一种感觉很欣喜？ 草给人一种“生”的感觉，想到“生”联想到太极，无中生有；“生”还蕴含了动和静，有静有动；“生”对立着死，有头有尾，有迹可循。这就是我找到的灵感，下面依据这个灵感做出的设计。 三三，第一个设计 从小草身上找到了“生”的灵感。现在根据这些灵感来进行第一个设计，对开头提到的多级选择列表的通常做法进行改进。 无中生有：哈哈，又不是在练武功，还无中生有，太扯了。在我们的问题中有无中生有吗？有的，只是被我们忽略了。在整个问题中有一个东西开始是不存在的，伴随着选择的深入才产生，所以通常在第一屏设计的时候没有意识到它的存在，也就没有给它留下位置，之后的页面延续了第一屏的设计，所以在页面上也丢失掉了。这个无中生有的东西就是用户的选择轨迹。 在上面的例子中用户的选择轨迹就是：“食品,食用油,花生油,……”。当用户没有进行选择的时候，它是不存在的，在用户进行了选择之后它就产生了。所以我们不应该当它不存在，应该让用户感知到它。那难道在界面上直接显示“食品，食用油，花生油”这些字吗？我找到了解决这个问题的另一灵感，也来自大自然。拍了张照片： 如果从花的角度向根看，看到的是一节一节的花枝，这和选择路径多像啊。花枝由粗到细，长短不一，花最关心的应该是离自己最近的花枝，离自己远的枝知道个大概就行。依循这个灵感可以把“食品,食用油,花生油,……”抽象成长短，粗细，颜色不一的线条，也许是这样的： ，后期美术人员可以继续加工。思路回到小草的灵感上。 有静有动：“生”蕴含了动和静，它们和谐统一，它们是“无中生有”的延续，它们是“有迹可循”的前提，一动一静包含了丰富的信息。“动”比较好找，页面的切换动画就是动。动画有很多种：翻页动画；淡入淡出；立方体转换；……。更好的理解了动就知道我们想要的是什么样的动，它应该表现什么。“静”也一样明显，动画完成后的页面展示就是静了。看上去静比较好处理，但也有它的原则。假如有一个新需求：重点突出鲁花花生油，有一种处理方法大家一定见过，就是在鲁花周边做一个小标志，然后不停的闪啊闪啊。这样的处理就破坏了静，从而让用户对动静的感知混乱，这种处理要被抛弃。 有迹可循：有头有尾才会让人有迹可循。它们在哪里呢？“头”应当是一次事件的起点，对我们来说就是用户的点击，用户的点击表示选中列表的一项，产生了页面切换动画；下级列表的展示；选择轨迹又增加了一个节点；等一系列事件。“尾”是一次事件的结束，对我们来说就是下级列表的完全展示，它等待着下一次的点击。在这里隐含了一个概念：“一次事件”。从用户的点击开始到新列表的完全展示，称为一次事件，它是逻辑上的单元，事件的过程都应该在逻辑单元之内完成，将来新的需求，也要归置于逻辑单元之内。 说了许多，我们来揭开改进后设计的面纱： 这是一个完整的逻辑单元的展示。左图是当前列表用户点击，中图是页面切换，右图是新列表的展示。 左图：“生”的起始状态也就是“无”，在左上角预留了选择轨迹区，如果是第一级列表也可以完全不显示。这时世界是“静”的。当用户选择了其中一项，就开启了一次“生”的过程。 中图：世界由“静”到“动”，无中生有。第一步，标题移向选择轨迹区，选择轨迹区显现；第二步，选中项以圆形轨迹从页面左侧移出，从页面顶部移入；第三步，新的选择项从页面右侧波浪式顺序移入页面。原有的标题是“头”，新的选择项是“尾”，有头有尾，有迹可循。在动画轨迹上我选择了太极的形象，这种形象“生”的感觉很强烈，也可以选择其他动画轨迹，只要遵循头尾原则和“生”的感觉就行。 右图：由动归静，完成了一次“生”的过程。页面上所有动作运行完毕，回归静止，选择轨迹区显示了一节新的枝干，新的列表如同枝干顶端的花朵一样开放，又如小草一样绿了大地。 “生生不息”，令人欣喜的“生生不息”。 四四，第二个设计 如果第一个设计不能让你兴奋，那么我们来进行第二个设计。 先看一张图片  Path的这个设计相信大家已经非常熟悉了。第二个设计就是在此基础之上，结合“生”的灵感，改进多级选择列表的问题。前面啰嗦了许多，这里咱们直接上图。 第一张图： 改变原有Path弹出为扇形展开，选择项可以拨动。
第二张图：
选中食用油之后，食用油区域扩大，禽蛋和酒类向两边收缩，改变食用油文字显示方向，展开食用油下级选项。
第三张图：
选中花生油之后，花生油区域扩大，大豆油和橄榄油向两边收缩，改变花生油文字显示方向，，花生油和食用油的区域厚度向内收缩，展开花生油下级选项。 这就是第二个设计，有了圆润的设计思路，好比胸中之竹。 | 
发表于 2013-5-3 15:58:00
楼主
