TEANIE » Design

Android Design

Hugo — Fri, 13 Jan 2012 15:30:00 +0000

还在为miui、Timescape、Sense这些各类的Android定制界面弄得眼花缭乱？
还在不知选择何种界面而左思右想？

也许今后我们再也不必也此类琐事而“烦恼”，因为我们会有一个官方的、可靠的选择——来自景山的谷歌同学在本届CES上正式确认了Android最新版本——冰淇淋三明治将成为第一款采用统一标准UI设计的系统版本。

而为了呼吁各位Android开发者尽快投入原生Android设计，谷歌方及时推出了名为Android Design的站点来引导开发者们做出更加符合Android原生风味的APP应用。整个Android 4.0都拥有一套统一的界面设计风格，这套风格可以作为第三方设计师设计系统界面时的标准参考。

移动用户体验设计大师Matias Duarte在本届CES上进行了发言，他半打趣的向开发者建议到：尽管不遵循统一风格的设计会让应用显得与众不同，但谷歌方面还是希望开发者能够采用统一的Android风格去设计这些应用，尽管谷歌不会采取强制的措施让开发者们“就范”，但从长期发展而言，谷歌方面还是希望能够做到平台的统一，至少在整体风格和应用方面来阻止Android平台的持续碎片化。

不过，过于统一的用户界面和应用程序也会带来一定问题。Android是一个开放平台，百变的UI界面和设计风格已经成为Android竞争力之一。习惯了百搭的用户们如果突然回到一个“统一”的风格下，会不会反而陌生得不知所措？也许，这是谷歌最首先要考虑的问题。

关于 iOS APP 的用户体验设计

Hugo — Tue, 11 Oct 2011 15:57:35 +0000

iOS APP体验设计不像互联网的体验设计那样，有一堆的方法论和可以“借鉴”的案例。目前除了苹果的和前Palm的外，没有找到更好的设计哲学和方法论。

事实上，即便认真地研读了HIG和Zen of Palm，甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP。其原因，我得从程序猿和设计湿说起。

程序猿 vs 设计湿

最被思想处于上世纪初的人理解的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理构成。我这里讲的设计湿不是美工！这是前提。因为美工只关心好不好看，他们几乎不关心（或者不懂）产品的易用性。

如何鉴别程序员和设计师呢？你无法用会不会写代码来区分他们（毕竟很多设计师是会写编程的，例如彩程设计的设计师们，反之亦然），但是你却可以用通过他们平时思考方式来区分他们。

程序员： “哇！这个功能好！我们能不能在我们的APP中加上呀？” 这种场景常发生在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的感叹（或者心里的感叹）。

设计师答：“我们凭什么要加这个功能呢？”

程序员更倾向于关注功能本身，希望把所有好的东西都加到自己的作品中。例如，好的设计模式，高效的算法，看似绚丽的特效。一般程序员的作品有两类，第一类是功能比北京的车子还要多，你需要一本牛津字典一样厚的说明书才能搞懂如何使用。另一类有十分绚丽的特效，界面飞来飞去，一走神就以为自己在耍杂技了。

设计师更倾向于关注产品整体，他们通常都有产品的功能洁癖。他们通常会从摄影中找到共鸣：一张好的照片有三个要素 1.有一个鲜明的主题。 2. 画面中的元素可以快速地把观众的注意力转向这个主题。3. 只有一个主题，所有有主题不相关的重点通通砍掉。

不幸的是，很多iOS的开发者是从程序猿跳出来做的。泪流满面地用咆哮体高喊 “我们程序猿也终于可以赚钱了！！！有木有！！！有木有！！！” ，于是他们做出来的东西可以用下图简要地说明：

没错！问题不在于功能是不是足够的多，而是体验是否足够的好，是否能解决问题。而尤其在做iOS的APP设计的时候，由于设备的本身特点直接决定了设计完全不同于网站的体验设计。

我们认为，主要区别有以下三点：

1. 视觉焦点&操作焦点

所谓视觉焦点和操作焦点的问题，我们可以从传统的电脑使用说起。我们控制电脑通常是通过鼠标，手用鼠标控制屏幕的指针，移动到某个位置，点击、双击、拖动等完成操作。我们看到的是屏幕，操作的是鼠标。我们的视觉焦点是屏幕，操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。因此，我们想打开一张图，只需要用手点一下图。

视觉焦点和操作焦点同一的最大好处就是十分容易学习使用这类设备。但是正是因为两点同一，当我们在操作的时候同时也会挡住焦点。

这一特性会影响到很多UI设计，例如：拿出你的iPhone，把手放在iPhone上，你会发现你的iPhone最大宽度也就4个手指的宽度。

我们用圆圈代表被挡住的区域，其中绿色区域是安全区域，代表我们心理上认为一定可以准确地点到的区域；而黄色区域代表我们心理上会有点忐忑，不能确定是否能点中的区域。例如某拍照软件的设计：

没错，问题不言而喻。从UI的设计上来看，如果是个网页的话，视觉的确没什么问题（当然，删除按钮放在修改的旁边本来就是愚蠢的做法，这一点就先不说了）。但是由于视觉焦点和操作焦点同一的原因，点击修改就变得十分困难与紧张，何况旁边还是一个删除按钮。

2. 空间感知

传统的互联网网页间的跳转，我们都熟知的是利用链接。链接可以在整个网站甚至是网站间任意跳转，点了链接后就进入了一个全新的空间。空间感知为网状的，没有头没有尾，在任意一个点通过网址都可以进入。

在移动设备的应用程序设计中，进入APP通常都是一个固定的点，每个操作就带入另一个空间，如果失去了空间感知，就像失去了地图，用户会很容易有迷失的感觉。

而由于屏幕的大小等因素，APP不能直接告诉用户空间是什么样的，但是可以通过各种手段来给用户以暗示。例如：

Camera+中，两个主要的场景，一个是拍照，一个是照片管理。两者之间空间是上下的关系，当用户在拍照场景下点击相册时，界面会向上推动显示照片管理的场景。反之亦然。此时向用户暗示的场景如图所示：

更复杂一些的空间暗示，如Reeder iPhone版。空间中的每个位置十分清晰，并且用动画的方式流畅地向用户暗示这种空间感。不仅如此，Reeder iPhone版的加星去星的空间感知不是上下左右，而是前后的关系。请自行购买后体验。

除此之外，Reeder iPad版本和Our Choice的空间感知也做得十分的棒。以Our Choice和Reeder iPad为例（视频）。Our Choice在选章节的场景进入章节内文时，选章节的场景会缩小，通过“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了类似的方式。

3. 体位化设计

以iPad为例子，通常我们使用iPad的时候有两种体位，第一种是把iPad放在桌面上进行操作，这种体位使用APP，无论按钮在哪里，点击都需要用一只手完成，两个步骤间的按钮距离远近也不会成为负担。而当手握着iPad的时，这种特殊体位，问题就出现了。

（如果你有手机，请现在拿在你的手上）倘若你只希望用一只手完成操作，你会发现，你用大拇指点击屏幕中所有点，却只有绿色区域是很易点击的。如下图所示，iPad的易操作区域也是分布在弧形区域内。

接下来用一个视频还说明坏的体位化设计和好的体位化设计的区别。

前半部分坏的体位化设计，是因为设计没有考虑到操作姿势，以至于左边一排不常用的功能占据了最重要的黄金区域，而常操作的区域却远离易操作的区域。操作起来就比吃掉一只死苍蝇还难受。而后者，好的体位化设计，所有的常用功能，一只手，不需要太多移动就可以全部完成：上篇文章，下篇文章，标记未读，标记加星。

当然，如果你是我们《牛壹周》的忠实读者，那你一定记得我们的风火轮（详见牛壹周1.2之无敌风火轮）和一阳指(牛壹周1.1更新手记)？没错，我们坚决地去掉了一阳指，因为这是一个漂亮却难用的设计（至少不是一个好的体位化设计）。我们在架构上保留了风火轮（当然，只是在程序中保留，但并未启用），因为这是一个很好的体位化设计案例。例如，在阅读杂志的时候，我们常要翻下一篇文章，传统的操作是先进目录，然后再找到要看的文章，再跳转。而使用风火轮，如视频所示，你的手完全不用离开屏幕，无论你的手有多大多少，无论你是左撇子还是右撇子。

在即将发布的iOS5中，iPad的键盘设计也很好地体现了所谓体位化设计的精髓：

结束语

iOS设备，甚至是包括Android在内的所有移动设备，他们都因为独特的使用场景，似的设计不同于网页设计。很多“美工”，甚至程序员从网页设计转变角色来设计移动设备APP时常忽视这些隐形的因素，最终导致产品设计水平难以提高。如果说近年来交互设计师在网站设计中的地位越来越高，那在移动设备的设计中，他们的地位会更为重要。视觉焦点/操作焦点、空间感知和体位化设计这三个iOS设备的特点事实可以类比到Android甚至更多的设备中，当然也不局限这三个特点。

当然，也正是因为这些原因，当我们听到别人兴奋地告诉我们：“哇！HTML5可以做到所有设备自适应ye~”的时候，我们通常是不屑，心里默想“程序员！”。当然，这里并非贬低之意。只是，有一点不得不承认，不同尺寸的设备，不同的分辨率，若想获得最好的体验，“自适应”让机器适应了却让人难以适应。例如一个按钮本来有1厘米高宽的，一个自适应，在iPhone上就只有原来的1/3时，你叫人怎么点击？当然这样的例子很多。大多数这种不花功夫还大赚的宣传，就犹如电线杆贴满的小广告，通常都是缺少优质应用的病入膏肓的硬件厂商为了快速解决痛楚而买肾的做法。当然，对技术敏感的工程师就不自觉地帮着一起吆喝罢了～

原文：http://blog.mycolorway.com/2011/06/16/ued-for-ios/

个性工作室看个够(图集)

Hugo — Tue, 11 Oct 2011 15:19:11 +0000

个性工作室看个够(图集)：工作室的环境很重要，很多达人会对自己的工作环境进行精心布置，一起来看看→”→

给设计师的建议：如何应对不同客户

Hugo — Tue, 27 Sep 2011 04:12:02 +0000

平面设计师和网页设计师要面对多种多样的客户类型，有些爱打听，有些自以为是，还有一些根本一无所知。今天，我们就对他们分类，并教给一些应对技巧。这些技巧来自于我个人的工作经验。

在开始了解顾客的心理之前，我们应先了解一些需要在承诺之前完成的事情。

需要完成的事有

数据

数据对于自由职业网页设计者而言至关重要。自由职业者通常自己将图形设计转化为网站格式。如果你从事这一行，你需要了解准确的数据量，否则你就会有麻烦。我记得一位来自NGO的顾客告诉我，他们需要把他们组织的相关图片放入动画相册中，我同意了（这没有什么困难）。我收到了一份DVD，里面含有超过 1,000 张高清晰的图片。我真傻，当时竟没有了解他们真正的需求是什么。你需要知道：

数据能够处理的照片量是多少
它们需要多大的网站结构
该网站的总容量是多少

思维

弄清楚客户的思维想法和他们的好恶，这是首要任务。一些人偏爱暗色调背景，另一些人则相反。用电脑为顾客展示一系列图片样例，从中揣测他们的偏好。一些人喜欢渐变和怀旧的图案，另一些则喜欢单色图片背景。一些人想要给网站添加很多动画，但另一些则只希望网站下载速度快一些。问题是，他们无法将这些信息都告诉你，所以你需要自己弄明白。如果你处理的是一组企业客户，而你又无法断定某个人的想法，这时，你就需要靠你的常识来判断。

需求

顾客不了解技术方面的东西。你必须确确认他们的需求。我给你设计了一个可用的法则。法则是，“网站多久被更新一次”。如果网站需要时常更新的话，你就需要运用CMS，如WordPress或Joomla。相反，则使用HTML-CSS。如果你能做出正确的决定，剩下的部分就自然会水到渠成。

标价

开价是多少，这是个大的议题。我学到的一点就是永远不要讲价。一旦出价，就不要再变动，因为如果你降价（哪怕是降了很少），顾客也会觉得你是多收费了。另一个技巧就是，对于网页设计知之甚少的客户，你可以要价高一点。之所以这样是因为他们会要求不在这个设计程序范围以内的服务。当他们提出要求时，比如说留言板的脚本文件等等，他们应该为其支付费用。

爱打听客户类型

接下来让我们来了解不同的客户类型，先从最难对付的客户类型开始。这一类人通常要求最苛刻。他们努力要证明你的设计“不够好”或是这里或那里有问题。你可能会有预感第一次见面这位顾客就让人头疼。他们典型的特征就是会从收费中扣回很多。

在创业之初，你不得不跟他们打交道。事实上，这未必不好，因为他们能够帮助磨炼你的气质。

与之打交道

首要任务要定妥订单中的所有详细资料，包括了校对所需时间（这不应耗费很多时间）。随着设计的进行，你的薪金也该到账。无论何时，他们提出了不合理的要求，你只管断然拒接，并解释说合同中不包含此项。

技术人

爱打听的人群通常是业主，但很多情况下，一个IT的专业人员也会找你来做设计网页。这类人可能是代表某家公司前来设计网页，或是设计自己的网站。

与之打交道

IT领域引用过一句话，“如果你不能让人信服，那就迷惑他们”。永远不要在擅长IT的人士上尝试这种方法。他们是不会轻易相信的。在他们面前，你该真诚待人，实话实说。他们了解你的需要，所以你要对他们坦白。

Richie Rich

他们是你梦寐以求的顾客。他们手里有钱，愿意花钱。一旦这样的顾客走进你的办公室，你该这样跟他们打交道：

与之打交道

首先，他们需要你给出贵宾级的协议。如果你给出了协议，他们会将其称之为特定的客户支持。

他们不会自己来评价你的设计水平。他们会向第三方寻求专家意见。所以，要记住，网站设计会拿给专业人士鉴定，一定要设计时髦一些。

还有一些没说的要点，但文章已经够长了，改天我们再学习。

———————————————
译文出处：伯乐在线 – 职场博客 – 设计
译文链接：http://www.jobbole.com/entry.php/1473

原文：Tayyab　　翻译：敏捷翻译 – 史莉萍

避免过度设计：有所为有所不为

Hugo — Tue, 23 Aug 2011 08:24:29 +0000

最近在产品的设计流程当中，融入了正儿八经的专职交互设计，反复体验着这种完整团队所带来的优缺点，虽流程完整，但细节困扰。其困扰之一，我感觉应该叫过度设计。

过度设计，一般是说技术开发中，对于逻辑复杂、技术先进的过度追求，导致了技术框架虽看似华丽却复杂难用。若说到产品功能及交互的过度设计，应该是“过度追求体验完美、需求满足”而导致的“实际体验下降 or 长期产品定位偏离 or 功能没人用”的悲惨结果。

为什么会导致过度设计？

原因1：一味追求体验

所谓大团队、多部门的互联网公司，在开发产品时，设计资源往往是产品部门无法把控的，一枚宝贵的设计师，往往曾经跟过很多产品，总是被派来派去，而不是长期跟进某一个产品。因此，再如何苦口婆心的为团队成员灌输市场情况、产品定位、项目目标，也不可能形成合作过程中的默契感。没有默契，就没有产品归属感，只有流程管控和死板的执行。

如此工作框架下的设计师，其首要目标很难与产品发展保持一致，而是要为自己的设计作品照想，要让这个产品中自己负责的设计部分，被他的主管认可、被主管的主管认可。这合情合理，天经地义。但是，他的主管，却与我们的产品很少有交集。这就是苦逼的开始。

在这个时候，设计师必然希望每一个设计细节都能考虑周全、设计完美，几乎希望摒除一切不好的设计，以在其老大面前证明自己的能力。但是，假如眼前这位设计师，没有眼观六路、耳听八方的强大能力和视野，则极有可能会被这种追求完美的设计思想所拖累，让一些设计细节走了样。

设计师挖空心思，拿出一份自认为近乎完美的作品，并苦口婆心说服所有人相信并执行，即使隐约感觉到不对，但乍看似乎完美无缺。推进到开发或上线测试阶段，真正的问题从走样的“完美设计”当中渗透出来，淋伤的则是产品计划，傻眼了。重新改、重新写代码、推迟发布。

这种过度设计，不止伤害团队和产品，还会浪费时间：

• 挖空心思的追求完美，比常规思路的设计，多耗时3天。

• 产品与设计师一起确认设计细节，在“非预想的设计细节”方面博弈一番，产品说“我没见到过这种设计”“开发和维护成本大，浪费时间啊”，设计说“这种体验确实是更好的”“

• 开发非系统默认的精致设计细节，多耗时3天。

1周，就这么浪费了。就是这样。

原因2：一味的满足需求

研究用户需求时很容易陷进去，然后被非理性所控制，假如自己没有足够的经验，而身边又没有靠谱的人提醒，就会有一堆本来不是需求的需求，成为开发任务，所以才有了后来滥大街的一句口号“产品减法”。最苦逼的是技术：“辛苦写好的代码，说减就减，***的当初都干嘛去了，一群SB！”我往往都随声附和，暗骂一声自己。。

以下两种常见的情况，会导致“过度满足用户需求”的问题：
一是对用户声音缺乏筛选。用户不是产品人员，其在使用产品时，提出的问题、表现出的困惑，一定是偏自我的感性意见。“我不认识这个按钮啥意思！”“我感觉全部展示出来才好看！”“这个功能特别不方便！”

二是对需求研究无法保持理性。“假如自己给自己评论会怎么样”“要告诉用户不能这样做啊，直接砍断不好吧”“用户想这样，然后在那样，然后在这样，就会出现困惑了呢！”“直接把入口铺出来，这样才最方便！”

总之，当在理解用户需求时，如果不能以一种正常、理性的心态推演使用场景，很容易被上面这种问题带到沟里，最终导致过度设计。（身边靠谱的产品人，多是理性起来不是人的射手座~~~呃）

功能以及交互上的过度设计，最终可以导致一系列后果：

1、浪费时间，延误甚至失去市场机会！

2、在过度设计的博弈中自我耗损，伤害士气！

3、过度设计的功能，看似华丽，却无人问津，白搞了！

4、最可怕的问题：过度设计的细节，导致错误引导，培养了错误的用户习惯，并且这一过程，不可逆！

第4个问题，有必要详细描述一下：

• 假如只是一个功能入口，入口A比入口B更加便捷，用户只会记住A，而忘记B。假如产品设计之初，希望用户在途径B时，享受更多的推荐或引导，那么B的这种作用就发挥不出来。而这个时候，再想删掉A，用户会骂死产品。若想修改A，则是动框架，耗费成本。

• 假如是一套用户使用流程，流程A比流程B更加舒适自然，但是如果没有考虑到A和B对于整个用户引导的差异，而草率的选择了A，那么这种用户引导的差异，或许会导致产品定位的偏离。（近期某款雷声很大的新产品，正是犯了此忌。）

如何减少过度设计的发生？只能对症下药。

不要一味的追求体验：

• 一是，让产品设计师更多的向产品靠拢，增加默契感，形成产品归属感，在做事情的时候便可以有效的规避不信任的细节争吵。

• 二是，改变不合理的“产品负责制和确认层级”机制，产品负责的归产品。这样才能在通篇考虑“市场、定位、时机、成本”的时候，做到相互信任和理解。只有让产品横空出世，整个产品组才能真正有所收获，而不只是通过一个设计作品来增强自己的满足感。实实在在的成功最重要。

面对需求，保持理性：

至于产品人，只能多犯错多磨练，让自己靠谱多一些。总之，在产品创意时不失感性，但在面对需求时应该保持理性。幸运的话，进入一个整体靠谱、左右权衡的经验团队，会让自己的成长方向更正确。

注：本文转载自劣松

TEANIE » Design

Android Design

Related Posts

Related posts

关于 iOS APP 的用户体验设计

程序猿 vs 设计湿

1. 视觉焦点&操作焦点

2. 空间感知

3. 体位化设计

结束语

Related Posts

Related posts

个性工作室看个够(图集)

Related Posts

Related posts

给设计师的建议：如何应对不同客户

Related Posts

Related posts

避免过度设计：有所为有所不为

Related Posts

Related posts