小站会根据您的关注，为您发现更多，
看到喜欢的小站就马上关注吧！
下一站，你会遇见谁的梦想？
色彩的声音
前言色彩是一个网站的情绪表达方式或者说是性格特征的体现，每种颜色都有着属于自己的声音。作为一种视觉元素，色彩是很难被量化被衡量的，也很难用理性的角度去分析和阐述它，我现在试着用另外一个角度去试图衡量网页的色彩，一种尝试。从最基础的色彩本质、色彩搭配形式、及色彩对用户的潜在影响和心理暗示等着手，去分析色彩，读懂色彩，让色彩帮设计师说话。&
一、色彩的基础知识
色彩的三大要素
1.色相我们最常见的色谱&虹&就是把颜色按照& 红 橙 黄 绿 青 蓝 紫 &依次过渡渐变，色相两端分别是暖色、冷色中间为中间色或中型色。
2.明度明度就是色彩的明暗差别，如深红、大红以及粉红等。
3.饱和度饱和度是指色彩的鲜艳程度，也称色彩的纯度。
二、不可思议的色彩魔力
1.色彩有魔力，选色需谨慎！
快餐店给我们的印象一般是座位很多，效率很高，顾客吃完就走，不会停留很长时间。有人喜欢和朋友约在快餐店碰面，但其实快餐店并不适合等人。这是因为很多快餐店的装潢以桔黄色或红色为主，这两种颜色虽然有使人心情愉悦、兴奋以及增进食欲的作用，但也会使人感觉时间漫长。如果在这样的环境中等人，会越来越烦躁。请两个人做一个实验，让其中一人进入粉红色壁纸、深红色地毯的红色系房间，让另外一人进入蓝色壁纸、蓝色地毯的蓝色系房间。不给他们任何计时器，让他们凭感觉在一小时后从房间中出来。结果，在红色系房间中的人在40~50分钟后便出来了，而蓝色系房间中的人在70~80分钟后还没有出来。有人说，这是因为红色的房间让人觉得不舒服，所以感觉时间特别漫长。确实有这个原因，但也不尽然。最主要的原因是人的时间感会被周围的颜色扰乱。同样道理，高血压的人忌红色。再举个例子，在时下非常流行的休闲运动潜水中，人需要携带氧气瓶。一个氧气瓶大约可以持续40~50分钟供氧，但是大多数潜水者将一个氧气瓶的氧气用光后，却感觉在水中只下潜了20分钟左右。海洋里的各色鱼类和漂亮珊瑚可以吸引潜水者的注意力，因此会感觉时间过得很快，这是原因之一。更重要的是，海底是被海水包围的一个蓝色世界。正是蓝色麻痹了潜水者对时间的感觉，使他感觉到的时间比实际的时间短。（部分资料来自-《每天懂点色彩心理学》）
2.听见色彩的声音
以上故事和实验都证明了，颜色是可以左右用户的情绪，也可以影响用户判断的。既然色彩潜意识在影响这着我们，那设计师必须学会善用色彩，在设计的时候，用色彩去正确传达产品的本质和内涵。当色彩被正确传达后，便能与用户产生心灵共鸣，产品也就能更深入人心。黄色：青春、乐观、豁达。常被作为点睛之笔。红色：活力、速度、紧迫感，常用于促销打折甩卖等。蓝色：信任、安全、有底蕴，常用于企业、银行、安全中心等行业机构。绿色：生命力、轻松、天然、无污染，常用于保健品等行业。橙色：积极、进取、活力，阿里巴巴色也是橙色，常用于唤起行动，如button的颜色也常用橙色。粉色：浪漫、女人，常用于女性消费行业，女性产品等。黑色：影响力、时髦、严肃，常用于奢侈品营销等。紫色：安抚、冷静、神秘，常用于美妆或抗老的女性产品设计中等。当我们了解了颜色后，就能更加准确的掌握我们的页面风格的定位，用颜色去阐述你的产品。经常做&脑部运动&，联想游戏等。
3.色彩与营销、品牌
每种特定的行业，都有相似的产品色彩倾向性
大部分知名品牌的logo倾向于用色彩相近的色调&三、色彩搭配以下以banner为例，简单剖析下色彩的搭配技巧及色彩搭配组合方式以及搭配呈现的视觉效果。
单色搭配：由一种色相的不同明度组成的搭配，这种搭配很好的体验了明暗的层次感。
近似色搭配：相邻的两到三个颜色称职为近似色。如下图（橙色/褐色/黄色），这种搭配比较让人赏心悦目，低对比度，较和谐。
补色搭配：色环中相对的两个色相搭配。颜色对比强烈，传达能量、活力、兴奋等意思，补色中最好让一个颜色多，一个颜色少。如下图（紫色和黄色）。
分裂补色搭配：同时用补色及类比色的方法确定颜色关系，就称为分裂补色。这种搭配，既有类比色的低对比度，又有补色的力量感，形成一种即和谐又有重点的颜色关系，如下图，红色文字就显得特别的铿锵有力，特别突出。
原色的搭配：大部分是在儿童产品上，色彩明快，这样的搭配在欧美也非常流行，如蓝红搭配，frickr的logo以及 麦当劳的logo色与主色调红黄色搭配等。
&四、如何准确定位你的色彩前面分析的是通过颜色去感觉情绪。这里简单写，如何根据产品去捕捉色彩，也就是所谓的MOOD BOARD(情绪版)。情绪版是指对要设计的产品以及相关主题方向的的色彩，影像，图片等其他材料的收集，从而引起某些情绪反应， 以此作为设计方向或者是形式的参考。（具体请参考情绪版(Mood board)操作流程的新思考&&晓千）
1.原生关键词选择
首先，通过对产品的理解与认识，以及用户调研等得出体验关键词（Experience Keywords）。
2.衍生关键词
针对所得到的关键词，扩容信息，通过头脑风暴画出关键词的思维导图，寻找扩展关键词。
3. 收集相关图片，提取图片生成情绪版通过&原生关键词&和&衍生关键词&，通过网络渠道，收集了大量的对应的素材图并配合定性访谈。
4. 衍生关键词的分析&&分维诠释
5. 对情绪版进行&色彩分析&和&质感分析&
色彩提取工具：&总结色彩是种感觉，当我们学会读懂色彩，听到他们的声音，就可以做到熟能生巧，跟随着流行的趋势去游刃有余的驾驭它。我的见解大多也是基于前人的分享总结，同时结合了自我的一些观点。总之，多看，多想以及多临摹，都可以帮助设计师在色彩感觉训练上事半功倍
以行为为中心的设计
1.理清行为背后的本质需求
理清行为背后的本质需求，往往会产生意想不到的想法，能够极大地扩展设计思路。我们在对牙刷进行改良设计的时候，一般会从牙刷的形状、材料以及色彩等传统思路去考量，但是我们需要的真的是牙刷这种东西么？我们只是需要某种产品能够让口腔变的干净罢了。当认识到牙刷的功能本质是清洁口腔时，我们会思考&未来的口腔护理是怎样的？&，是延续传统的&刷&，还是采取其它行为方式，例如&喷&&嚼&，这样以来，设计思路就绝不会限制于牙刷这个物体本身，使用田野调查的用户研究方法，以用户本质需求为导向，基于用户行为，能产生新的解决方式。2.行为有时候需要适应技术
在以行为为中心的设计中，我们承认必要的时候人类行为需要适应技术，希望产品的设计是为了有效地支持用户的行为活动，而不是仅仅服从用户的意愿。人们确实是在适应技术，以行为为中心的设计不仅了解这一点，而且还可能很好地利用了这一点。很多时候你必须先学习工具和技术，然后你就会理解所要进行的活动了，比如射击，你必须先理解枪支的结构和特点才能掌握这项运动的精髓，成为一个优秀的射击手。科学家创造技术，设计师将技术转化为产品，用户适应技术&大部分时候就是这样的一个流程。例如，人从适应用鼠标操控计算机，到适应用手触控操作这种方式，人一直随着技术的发展改变行为活动，很难说触控方式是最好的人机交互方式，未来这种方式仍然会改变，人们将继续去适应技术。
强调以行为为中心的设计并不是要否定用户中心的思想。行为活动都是与人有关的，所以那些支持行为活动的系统通常也能很好地支持从事这些活动的人，因此我们仍然能够利用之前在以人为中心的设计中积累的知识和经验。3.设计引导行为以行为活动为中心的设计，并不是要求设计师观察行为，然后设计产品去迎合人们的行为，虽然大部分情况下如此。以行为活动为中心的设计还需要我们在适当的时候、适当的地点通过特定的设计来引导用户行为和活动，以达到某种目的，这也是行为中心与用户中心两种思维很大的不同。设计对行为的引导可以是消极的也可以是积极的，这种引导可以从生理和心理两个层面去认识，概括来讲主要包括约束和刺激两种方法。
要避免选择错误，最好的办法就是给用户唯一选择。同样地，要引导用户行为可以通过产品制造约束。如果用户能容易地看出并解释物理结构上的限制性因素，用户在使用之前就知道哪些操作时合理的，那么就可以有效地避免误操作。比如门把手的设计，如果去掉明显的把手，不提供拉的可能性，那么用户就可以明白这个门是通过推来打开的，当然很多门会写上&推&或&拉&的文字，这同样是帮助人理解的设计，但此时这个门的使用方式需要进行两个层次的理解，就其本身而言并不是一个很好的设计，不仅增加了成本，也增加了用户理解的负担。锁和钥匙的设计目前来讲很混乱，有的锁是顺时针旋转才能打开，有的则是逆时针，单从钥匙的旋转方向来讲就为用户造成了理解上的负担，如果放开约束，用户不论从哪个方向都能打开锁，或者能够让用户明确正确的使用方法，那才是好的设计。通过约束性的设计来引导用户行为在公共空间的设计中非常常见。比如盲道的设计，通过路面的突起为盲人提供一种空间上的约束，良好地引导盲人的行走行为。事实上，很多正常人在特殊情况下也会利用盲道来行走，比如在专心发短信的时候，这也许是一种有意识的行为或者是一种潜意识的行为，设计师如果观察和理解了这一点，也许能创造更多的设计。公共空间中座椅的设计一直以来就是设计师们关注的话题。大家都会发现，公园或者广场的长椅利用率很低，一般设计为三人或四人使用的长椅经常只有一个人坐在上面，尽管很多人徘徊、找不到座位，他们也不愿意同其他人坐在一起，为什么呢？因为很多人需要私密的空间，他们对陌生人会有本能的排斥，而传统长椅的形式让他们觉得同其它人过于亲密，尽管长椅能够为三到四个人提供足够的坐的空间。如果将长椅木条的横向排列改成纵向的，或者仅仅是在长椅上加一些小的隔断，事情就大为改观，同样长度的长椅的利用率便会上升。
（2）刺激前面已经讨论过&美观的物品更好用&，通过产品形态、色彩、材质甚至是声音等来刺激用户，激发思考，从而引导用户行为朝着预定的方向改变。通过激发用户心理从而改变用户行为的产品历史悠久，风铃便是一个很好的例子。夏天炎热，在没有空调和风扇的日子里，人们因为燥热而变得烦躁，行为上也表现的好动不安，在这种情况下人的工作效率和热情会明显降低，并会导致更多的失误。而小小的风铃，通过轻盈、通透明亮的外观以及悦耳清新的声音使人心绪变的安宁，行为举止也显得优雅从容许多。坂茂的卷筒卫生纸是用设计引导用户行为的一个绝佳的例子，它事实上包含着约束和刺激两个层面的引导。坂茂设计的卷筒卫生纸中间的芯是四角形的，卫生纸因此卷成了类似的方形。若是平常的圆形纸筒，在使用是，只要轻轻一拉，就可以很顺地抽下纸张，而在抽取卷在四角形纸管的卫生纸时，一定会因为产生阻力而发出&喀哒-喀哒&的声音，拉起纸来不是那么畅快。这个设计的特别久在于它造成的不便，四角纸筒产生的阻力以及所发出的并不那么悦耳的声音刺激着用户，引起思考，激发他们潜在的节约资源的意识，将用户的行为朝着良性的方向引导。另外，方形纸筒由于节约了纸筒之间的间隙，能有效地降低制造和运输成本。
设计是以人为中心展开的，了解了用户以及用户行为，发现和理解了设计需求后，设计的问题其实就解决了一半。将对用户和用户行为的理解进一步深化，从改良的各个方面具体展开设计，问题便可以迎刃而解
转：你所没有意识的你自己——浅谈下意识设计
假设这样一个场景：你走在路上，一辆卡车朝你飞驰而来，你将会做什么？回答傻站着不动的请允许我致以无上的同情。普通青年的答案应该是马上躲开，对吧？好，请先停一下，仔细想想，完整的动作流程是怎么样的？ok，重新整理一下：你看到了这辆车&做出它即将撞到你的判断&你感到了危险&你马上躲开了。觉得这个是标准答案请伸出右手放在自己的心口上，扪心自问一下真的是这样么？你真的是这样做的么？真实的情况应该是这样的：你看到了车&你感到了危险&你躲开了。所以究竟是什么救了你？A.&看到车的眼睛B.&躲开车的脚C.&做出指令的大脑答案是D.&你的本能，与生俱来的、历经千万年进化更加敏锐而不动声色的行为模式。（没错，这是个无厘头的坑爹答案。）生物学上的大脑分成三个部分，分别影响着思维和行为的不同方面。
旧脑（the&old&brain），也就是所谓的脑干，这部分是进化中最先产生的。旧脑只关心两件事，生存和繁衍，也就意味着三类信息会凌驾于其他任何信息而最先引起我们本能的反应：性、食物、危险。旧脑也负责调节身体的自动功能，如消化、呼吸和反射活动。
中脑（mesencephalon，midbrain）之所以叫中脑是因为它在空间上和进化顺序上都位于旧脑和新脑之间。它控制情绪，负责让人产生诸如开心、难过、愤怒的情感。
新脑，也就是我们所说的大脑皮层。新脑负责有目的、有意识的活动，也就是分析、推理等。当我们感知到某个东西或事件时，大脑的三个部分都参与思维和行为，而旧脑和中脑比新脑反应更快，因此在新脑（掌管理性思维的那部分）做出反应前，我们就&本能&地&下意识&地行动了。日本设计师深泽直人首次提出了一种叫做无意识设计的设计理念，又称为&直觉设计&，意为：将无意识的行动转化为可见之物。深泽直人是将affordance可供性这一概念通过自己的理解进一步转化为自己的设计理论。在这里为了区分开两种不同的概念，将接下来要介绍的设计方法叫做下意识设计，指的是利用那些我们根本没有意识到或者说没必要意识到就已经瞬间产生的反应为指导的设计手法。关键词：本能、反射、情绪、经验由本能、反射、情绪和经验产生的行为是很难被意识到的甚至可以说是无意识的。大脑并不如人们所想的那样是个绝对精密、高度发达的器官，大脑其实&效率低下、不可靠，信号范围极端有限&。所以为了应对不断变化的外界环境，大脑预设了很多条件，让人类的行为可以按照一定的模式行动，已达到更好的生存和繁衍这个原始但终极的需求。&
一、本能本能是指某一动物物种各成员都具有的典型的、刻板的、受到一组特殊刺激便会按一种固定模式行动的行为模式。它是由遗传固定下来的，是在个体发育过程中随着成熟和适当的刺激经验而逐一出现的。铁质围栏的的尖角
围栏大家应该都知道，开放区域里随处可见，本身目的是分割物理区域、引导人流。趋利避害是人与生俱来的本能。将顶部设计成尖角，正是利用了这样的下意识，在防盗窗还不甚普及的年代，在房檐上洒上碎玻璃也是如此，尽管作用有限，但聊甚于无。&
二、反射反射的定义是这样的：在中枢神经系统参与下，机体对内外环境刺激所作出的规律性反应。高等动物和人的反射有两种：一种是在系统发育过程中形成并遗传下来，因而生来就有的先天性反射，称非条件反射。它是由于直接刺激感受器而引起的，通过大脑皮质下各中枢完成的反射。例如，人进食时，口舌黏膜遇到食物，会引起唾液分泌。另一种是条件反射，是动物个体在生活过程中适应环境变化，在非条件反射基础上逐渐形成的后天性反射。它是由信号刺激引起，在大脑皮质的参与下形成的。望梅止渴
望梅止渴可能是从古至今最妙的反射行为设计。因为行军中没有可饮用的水，利用人类对酸味的条件反射，自然而然的解了渴。数字提示
如果有反射设计排行榜的话，iOS的push&messages绝对应该占上一席，可谓是当代社会大多数人都非常熟悉、又爱又恨的一种条件反射信号。强烈的红色底纹加上醒目的数字提示，大大咧咧的彰显着自己的存在感，让人不由自主地想要点开它一探究竟。
另一个我们熟悉的反射设计是微博的新feed提示。和push&messages的理念相同，通过颜色、形状等设计元素加上数字本身，造成强烈的冲击，在一次又一次的操作过程中强化了行为，让人下意识地尝试点击。&
三、情绪情绪是指人对认知内容的特殊态度，是以个体的愿望和需要为中介的一种心理活动。可以认为，情绪也是大脑对外界刺激物预设好的一种条件反射，对特定内容产生特定的行为。戒烟广告
明亮的色彩、微笑、糖果、可爱的孩子，这些特定的内容会引发正面的情绪；而黑暗、死亡、血液等则让人产生负面情绪。戒烟广告利用这种心理，让人在看到宣传内容时产生负面情绪从而一定程度上规避了行为。&
四、经验经验是从多次实践中得到的知识或技能。在这里，不得不提到记忆的产生，记忆是经验的土壤，那些经过筛选的对行为有指导意义的升级成为经验。记忆分为两种：一种是陈述性记忆，指的是能够明确想起某个事件或事实的一种记忆；另一种是非陈述性记忆，指的是不依赖于意识或认知的记忆。该记忆的形成需要多次重复测试才能逐步形成，主要包括感知觉和运动技巧、程序和规则的学习，是无意识的，很难用语言表达的记忆。非陈述性记忆可以通过某种刺激以下意识的方式提取。平板设备
一位外籍工程师发现年幼的女儿认为一切平滑玻璃表面的设备都如同iPad一样可点击、拖动操作。使用iPad等平板的经历让小女孩将这个体验下意识平移到其他具有类似形态的产品上，尽管这个经验带来的逻辑可能是错误的，但使用新产品时并没有产生多余的学习成本，这就是经验的力量。&
小结有没有发现，有一个共同关键词出现了很多次，就是刺激。由定义所述来看，刺激就像是预先设定好的条件，一旦触发就自动调出相应的行为。行为都是在瞬间完成的，它不经过你的大脑皮层，不需要被分析、判断。你甚至可能不曾意识到。刺激是我们和这个世界之间的约定俗成，先天及后天设定好的条件。而在刺激下产生的那些本能的、反射的、下意识的行为是人所不能控制的，最真实的内心写照。荣格在《本能与无意识》一文中写道：&我把无意识定义为所有那些未被意识到的心理现象的总和。这些心理内容可以恰当地称之为&阈下的&&&如果我们假定每一种心理内容都必须具有一定的能量值才能被意识到的话。一种意识内容的能量值越是变低，它就越是容易消失在阈下。可见，无意识是所有那些失落的记忆、所有那些仍然微弱得不足以被意识到的心理内容的收容所。&人是环境的产物。为了更好的生存和繁衍，人类根据环境来预设好自己的行为模式，以求更快更好的做出反应。所以对于迎合预设模式的设计，适应性是最好的，这样的设计不需要分析和理解，它恰当好处并且（看上去）理所当然。引申到交互设计领域，我们是否能得到一些启发？比如，在新用户的学习引导上是否可以复制用户已有的使用经验、防止出错的保护措施能够让用户一目了然、在情绪上暗示用户主操作流的进程等等，很多方法其实早就被设计师们充分运用到实际情况中，因为&将心比心&，设计师首先也是用户，生活中的一些经验被本能地移植到设计中来。本文只是针对下意识、无意识设计、可供性等等作一番个人层面的浅薄思考，希望能起到抛砖引玉之用
浅析Banner设计(转自”百度MUX”)
当今，无论任何一款互联网产品，都需要搭载PC平台进行推广，Banner更是推广的一大利器，怎么将Banner设计好就成为一个需要探讨研究的课题。&Banner规格尺寸大小不一，文件大小也有一定的限制，这就使得在设计上增加了许多障碍，颜色不能太丰富，否则会在文件大小的限制下失真，软文不能太多，否则会没有重点，得不偿失，怎么在方寸间把握平衡，变得十分重要。接下来，我为大家总结累一些，如有鄙陋，请指正，万分感谢。
第一部分：颜色
1．Banner与环境对比
试想如果在一个以浅色调为基准的网站上投放Banner，是不是从明度上拉开对比会很好的提高用户的注意力呢（相反亦然）。
以此也可推想出，如果在一个有颜色基调的网站上投放补色或者对比色的Banner，效果就会变得更瞩目（补色和对比色案例）。
2．Banner颜色简单至上 （1）试想一个Banner五颜六色，是不是就能够吸引眼球了呢？首先，先对比一下
哪个更吸引你的注意力呢？大多数人肯定会觉得后者给用户带来的视觉传达力更强，简洁明确、朴素有力的效果，给人一种重量感和力量感。前者颜色虽多，却没有带来更好的视觉传达效果，为什么呢？颜色过度使用会打乱色彩节奏，并且，减弱了颜色间的对比，使整体效果变弱。
（2）其次， 使用颜色越多，最后保存时文件体积越大，加载起来越慢，让用户等待就意味着和用户说再见了，如果靠降低品质来达到Banner的上传要求，那展现给用户的是低质量的banner，也一样会丢失一些用户。
所以，颜色简单有力，加载清晰快速，对于banner的视觉传达很重要，只要让用户产生点击欲望，我们推广的目的就达到了。
第二部分：构图
1．构图的定义及规则 构图其实说白了就是经营画面，进行布局，如何在你构图的引导下吸引用户点击，产生欲望，了解内容，如果都能达到，那说明你的构图成功了。构图的基本规则是：均衡、对比和视点。均衡：均衡不是对称，是一种力量上的平衡感，使画面具有稳定性。
均衡不是对称对比：在构图上来说就是大小对比，粗细对比，方圆对比，曲线与直线对比等等。
白色线条的对比产生了空间感视点：就是如何将用户的目光集中在画面的中心点上，我们可以用构图去引导用户的视点
将视点集中引导到slogan上介绍完构图的基本规则，举例子检视下：一张X-MEN的宣传banner，这张banner人物排布既平衡又不对称，人物大小不一，产生出对比，突出了部分剧中人物。Banner正中一个大大的X，把视点集中到了画面的最中心，很好的利用基本构图规则进行banner设计。
2．构图的样式 构图大概分以下几种：（1）.垂直水平式构图 （2）.三角形构图（正三角和倒三角）（3）渐次式构图 （4）.辐射式构图 （5）.框架式构图 （6）对角线构图(1)垂直水平式构图：平行排列每一个产品，每个产品展示效果都很好，各个产品所占比重相同，秩序感强，此类构图给用户心情：产品规矩正式、高大、安全感强。
(2)正三角形和倒三角构图：多个产品进行正三角构图，产品立体感强，各个产品所占比重有轻有重，构图稳定自然，空间感强。此类构图给用户心情：安全感极强、稳定可靠。
多个产品进行倒三角构图，产品立体感极强，各个产品所占比重有轻有重，构图动感活泼失衡，运动感空间感强。此类构图给用户心情：不稳定感激发用户心情，给用户运动的感觉。
(3)对角线构图：一个产品或两个产品进行组合对角线构图，产品的空间感强，各个产品所占比重相对平衡，构图动感活泼稳定，运动感空间感强。此类构图给用户心情：动感十足且稳定。
(4)渐次式构图：多个产品进行渐次式排列，产品展示空间感强，各个产品所占比重不同，由大及小，构图稳定，次序感强，利用透视引导指向slogan。此类构图给用户心情：稳定自然，产品丰富可靠。
(5)辐射式构图：多个产品进行辐射式构图，产品空间感强，各个产品所占比重不同，由大及小。构图动感活泼，次序感强，利用透视指向slogan，此类构图给用户心情：活泼动感，产品丰富可靠。
(6)框架式构图：单个或多个产品框架式构图，产品展示效果好，有画中画的感觉。构图规整平衡，稳定坚固。此类构图给用户心情：稳定可信赖，产品可靠。
3．软文（Slogan） (1)俗话说得好&话不在多，精辟就行&当今炙手火热的微博就是一个例子&140字概括你要说的&，Slogan也是一样。(2)要言之有物，第一要抓住用户的心里，了解用户的想法很重要。第二我们要推给用户什么，用户对什么感兴趣。下面举个例子：
Slogan只有四个字，终于来了，白色iphone4吊足了apple迷门近两年的胃口，这四个字恐怕是他们最想听到的。用户从不会质疑apple的性能，科技领先性及用户体验性，他们最想的恐怕就是拥有自己梦寐以求的白色iphone4。所以，apple的slogan简约而不简单
从iPad包装看苹果设计理念：用户体验放第一位
几年前，我第一次买产品的时候发生了一件有趣的事情。我买了一台iPod，那是带基座接口的第一款产品，你知道的，就是全白色，带有黑白小屏幕和滚轮，中间还有四枚圆弧按钮的那一款产品。虽然现在看来确实有点过时，但在当时已经非常前卫了。
第一眼就打动我的是iPod的包装。显然，苹果公司内的某位人物在包装上花了不少时间，思索着该如何包装它们的产品以及客户第一次打开盒子之后的第一印象是什么。从那一刻起，我觉得我迷上了包装。多数消费者电子产品公司很少考虑到该如何包装他们的产品或者打开产品的体验问题。对于小一点的产品，他们一般会使用塑料起泡包装，夸张点说，如果没有准备金属剪或是电锯是打不开这种包装的。而大一点的产品通常会装在塑料袋里，边缘再放些泡沫塑料块用来保护产品，然后装入很丑的纸板盒。这些包装全都非常实用，就因为它们太常见了，所以对产品的包装我们从来不会多作考虑。然而，这件事情一到苹果公司，就完全不一样了。苹果可不只是简单地使用一只很丑的纸板盒，上面印一下公司的标志，随意贴几张标签就算完结了。实际上他们在盒子的设计上花了大量的心思。他们考虑盒子放在货架上的会是什么样子，考虑如何在盒子上向购买者展示内容物以及打开盒子会有什么样的感受。我仍然记得第一次打开iPod盒子的时候，盒子里面呈现出来的精美让我非常震惊。它不是用塑料带包着，上面封一条胶带这么潦草而已，也没有用一大堆的扎带绑住电线。相反地，它简直就像是准备献给你，让你仔细察看的一件艺术品。显然，一定有人绞尽脑汁思索着打开盒子，看到盒子里面的产品的一幕幕情形，以及如何在包装上体现苹果的种种方法。当时我非常惊讶，但是过了好几年我才终于悟出苹果公司是故意而为之的，公司非常清楚地考虑到他们的顾客拥有一件苹果产品的整体体验，甚至这些人中的大多数都还没有成为苹果的客户。所以今天我的&新&到手，我将有机会再一次感受到苹果在其产品包装上的周到和谨慎。而且，这次我会把它记录下来。
让我们一起来见识一下吧！盒子是普通的白色纸板盒，但是完全不会给人以廉价的感觉。触感光滑，色泽纯净而且均匀。盒子上面只用一张iPad图片作装饰，两侧印有iPad商标，末端有苹果标志和iCloud图标的浮雕图案。
iPad包装把盒子拿起来，你会觉得它很结实也很有份量，不过不会太重。把它托在手上，因为整个盒子没有任何累赘，你可以感觉到盒子的大小恰好能装下内容物，一分不多。盖子很容易就能取下来，但又不会轻易掉下来。只需要花适当的力气就能取下盖子，而且，绝对不会有种盒底会一不小心掉下来的。或者可能摔坏的感觉。盒盖内衬有柔软绒，这大概是iPad屏幕的另一层保护层。盒盖摸起来非常有趣，这是大多数人从来没有察觉到的。
iPad包装盖子拿开以后，你第一眼就能看到iPad，也仅能看到iPad了，没有其他东西会转移你的注意力。你会看到一个黑色方形的玩意儿，四周环绕着白色的盒子侧边。就这么简单，没什么别的任何东西。iPad就舒适地躺在包装盒里，顶部基本上与盒子侧边齐平，平板顶部和相邻的盒子侧边之间只有几毫米的距离。
iPad包装iPad外面包有一层塑料保护膜，但不是普通的塑料包装，类似聚脂薄膜，厚度足够用来保护产品，又不会显得膨胀。这层膜也不会太薄，所以不用担心不小心撕坏了。Home键上方伸出一小块塑料耳片，以保证能够轻松地从盒子里取出设备。你完全不需要撕扯，也不需要使用什么尖锐的物体就可以很轻松把塑料保护膜移开。你只要把外套剥下来就可以了，甚至透过这个简单的动作也能明显感受到他们不仅考虑到如何使用塑料膜，也考虑到要如何把它取下来。
iPad包装iPad下方是一个白色的塑料盘，盘里装有电源和用户手册包，盘上印着&加利福尼亚苹果公司设计&的字样。甚至连这一层包装上都有一小张纸板耳片，方便人们能够轻松地从盒子里取出东西。托盘移开之后，你会看到USB基座接口电缆就安放在底下塑料的小凹陷处。所有东西都是洁白的，完全看不到任何瑕疵或是任何伤痕。塑料盘装在盒子底部，以防止塑料盘松开。电源的塑料包装和的完全一样，仍然有带一张小耳片以便用户能够轻松地从包装上取出电源。甚至连USB线也是用这种塑料包装的，而不是用些更传统的材料。再者，这里所使用的材料不会让人感觉到廉价。所有的安排都是有原因的。完全没有扎带也没有塑料泡沫包装，只有同时用来包装和保护内容物所需要的材料。真的就是这么一回事。如果你花点时间仔细看看，你会发现苹果又一次生产出令人咋舌的包装，这证明这个包装是经过深思熟虑的。我买的苹果产品的包装非常合我的意，所以我通常都会把包装保留下来，不过，我真不太可能会保留其他产品的包装。遗憾的是，更多的公司并不能像苹果一样在他们的产品包装上多花些心思。在拥有一件产品的完整体验中，包装的确是其中一部分，完整的体验从你还没购买之前就已经开始了，一直到你打开包装，开始使用产品。那些意识不到产品包装对于顾客对产品和公司的感知所扮演的重要角色的企业永远都不可能像苹果一样为顾客提供完全一样的体验。苹果包装的各个方面都流露出了高品质的微妙感觉，正如他们所创造出来的产品一样。(本文译自安东尼&凯(Anthony Kay)的文章《The Experience Of Opening An Apple Product》)
转：我们身边的用户体验
改头换面的牙膏
与以往我们使用的牙膏不同，这个牙膏的包装是将纸盒包装和软管融为一体的设计。不仅去掉纸盒包装减少了成本，这种外形设计在运输过程中还可以节约运输空间，使用时也可以减少牙膏的残留，避免浪费。
苹果产品单纯化设计的基础或许就是将复杂的东西简单化，这一点在苹果的产品设计上得到了充分的证明。苹果的设计总监Jonathan Lve将设计解释为&必须尽全力将设计单纯化，iPod和iMac的成功，原因之一便是排除了那些从功能上来看就算没有也无妨的要素&。
车厢内有爱的细节香港迪斯尼地铁车厢的扶手和车窗，被设计成Mickey头像的形状，乐趣横生，给游客留下生动的第一印象，在保证设计实用性的同时，传递出公园带给游人的童真童趣。
音符耳机的律动Panasonic推出的一款入耳式耳机，将耳机包装设计成为音符形状，直观传达出产品功能，让人耳目一新。
人类无法阻挡的&海底捞&&人类已经无法阻挡&的海底捞成早就是大家关注的热点，我们且不论其商业运营，但其在食客体验上确实颠覆了常规的饭店餐厅。海底捞充分做到了让食客运用自身的整体感知能力去享受食物与服务，而非简单的填饱肚子。优美的环境、优质的服务、美味的食物都给食客留下深刻的印象。
&&&好的体验，很多人可能得需提醒才恍然大悟表示同感。而差的体验，很多人都能如数家珍、怨声载道。生活中那些不得不用，用起来又让人纠结的东西，你用过吗？杯具的体验相信每个人都有过吧？接下来，让我们回顾下那些让人抓狂的设计吧~。&
迷惑的地铁进站口真实场景：乘客在进站口刷卡后，发现准备通过的闸机门并未打开，相反旁边的却打开了。慌乱退出来再从左侧进站。磕碰剐蹭时有发生，严重影响出行心情。你是否也曾迷惑：究竟该在哪边刷卡呢？
症结所在：每个闸机的样式基本没有区别，并不能清晰的指引乘客进入正确的闸机。设计者完全可以用些许改进来解决这个问题。比如改变刷卡机的排列位置，
抑或用不同的颜色来简单区分，让乘客可以快速、准确地出入地铁口。
让人咬牙切齿的牙刷包装每次换新牙刷时，拆包装绝对是件技术活儿。沿着虚线撕开只能把牙刷头露出来，要想把牙刷整个从包装里拽出来，还得各种扭动它的肢体，各种撕包装，各种拽。反正我是从小到大一直被它困扰着。
键盘上的关机键一些从功能上来看就算没有也无妨的要素，被实现到产品上以用户提供快捷的功能，反而受到诟病。老式键盘的方向键上方有快捷关机按钮，使用时经常会不小心碰到关机键，造成不必要的麻烦。
&&科技改变世界，设计改变生活。科学技术日新月异，用户需求日趋苛刻。人们越来越期待生活中有越来越多的&人类无法阻止&的好体验。跳出传统思维，引导人性化体验。不需要说明书，不需要指示牌，美好的用户体验就是这么不言而喻
贴心的切换 减少重复操作
常常在手机输入时，我下意识会先输入我想要的汉字，噼噼啪啪后才发现当前是英文输入法，于是我不得不删除这几个字母&&切换回中文输入&&重新输入。&
　　这是一个典型的&切换导致重复操作&的例子。　　切换在互联网产品领域的概念可以理解为:从一种页面到另一种页面后可以继续操作，通常用户为达到同一目的切换到不同的方法进行。以输入法为例，用户通常会直接使用默认的设置，在发现无法达到目的的时候才会去尝试切换，这个过程常常会导致重复操作。　　伴随着不同的需求，切换诞生在不同的使用情景中。本文通过对用户执行任务的过程中（包括任务开始之前、进行之中和完成之后）产生的一些切换案例的说明，尝试找出一些帮助用户减少重复操作的解决方案。
1、任务开始之前　　以QQ邮箱的切换为例，当网速不快的时候，邮箱会在进入之前提示切换到基本版。
　　但是当网速正常的时候，这个切换在界面中非常&低调&，而且只在邮箱首页出现。我一直非常喜欢这个处理，基本版基本上就是文字，载入比较快，当网速不稳定情况下用户切换到基本版，从而实现更快的阅读和处理邮件。网络正常情况下用户看邮件很流畅，也就用不着切换了。
　　这种处理方式可以引用到任务开始，需求就终止的场景中，就像坐计程车，不管之前有多少选择，一旦上车就直接到达目的地，当然要是车抛锚不得不中途换车就另当别论了&&　　任务开始之前进行切换，用户重复操作的可能性很低。&
2、任务进行之中　　这个情景中切换的需求最多，譬如游戏选关，信息的排列方式、视图的切换等等。其实再为用户多考虑一步，就能避免很多重复操作了。以一款游戏的选关界面为例，它是按照过关顺序陈列，这就意味着每次用户都需要下翻页才能到最新关卡处。
　　如果关卡比较多，可以想象，用户每次都需要进行重复的翻页操作。
　　这里提出可两个方法去避免任务进行中的重复操作：
（1）锁住用户空间记忆的节点　　用户找文档或是东西时，总是通过它们在哪里再次找到它们，这是用户建立的空间记忆模式。在保持空间记忆的同时，锁住节点能够让用户更快速地完成任务。譬如浏览器的后退、前进一般默认放在左上角，这样用户能更容易返回熟悉环境。　　而后退弹出的历史网站相当于节点，帮助用户更加快速地回到目的地。
　　再以游戏选关为例，按照过关顺序陈列保持了用户的空间记忆，但是如果以最新完成的关卡为节点，用户就不需要一次次重复的进行下翻动作。　　迅雷看看HD的视频展示界面处理得很好，海报形式到列表形式之间的相互切换能记忆住用户浏览的位置。譬如下图所示，我在列表视图下看到了&大佬爱美丽&这一行，切换到海报视图的时候仍然是从&大佬爱美丽&开始。
（2）减少切换操作，消除导致重复操作的元素
　　曾几何时，我为word、jpeg等文件更名时总是弹出这样的提示而郁闷不已，不得不小心地避开后缀重新输入，好吧，也许你会笑说其实控制面板中是可以&隐藏已知文件的拓展名&，但是这么隐藏的功能，你不告诉我，我永远都不会知道。&　　Win7系统中，后缀不再默认出现在文件名中，重命名时候再也不会文件不可用了，从而消除了这个引起用户重复操作的元素。&
3、任务完成之后　　任务完成之后的部分通常有两种处理方式，一是停留在当前页面，内容进行刷新，这是最常见的，通常适合用户在当前页完成一个任务还可以选择性继续。譬如用户转播完某条微博还会继续浏览。二是界面的跳转，较适合任务完成后相关操作终止或者直接是必须进行另外一个操作。　　以用户群发短信这个过程为例：
　　选择联系人的时候属于第一种情况，选择一个联系人之后还会继续选择；完成选择属于第二种，选择动作终止，需优先要考虑自动跳转；发送完成之后，个人更喜欢智能手机的处理方式，跳转到短信群发对话框，能直观地看到短信发送成功失败的信息。
　　也许这个时候，你会举例子说：&Apple appstore安装后应用之后跳回桌面，我还想继续查找其他应用&。&&
　　我最初也比较诟病这个强制跳转，但是换个角度想，如果不这样强制的结果是什么？可能我们会花更多的时间去找刚才下的app在哪儿？另外，屏幕下方的常驻Appstore的入口能缓解了重复操作带来的不友好感觉。鱼和熊掌不可兼得，任务完成之后，如何切换关键还是要看用户的接下来的操作行为，从而提供最普适的操作。
结语　　也许有人说：&QQ邮箱使用中，即使网速再差，等一等，同样能进去嘛；游戏选关就多按几次嘛，反正找得到关卡；迅雷看看浏览资源的时候，位置不一样，大不了就不切换到海报视图呗，反正都能看完&&&&我非常同意在用户达到最终目的过程中，切换并不起决定性作用。　　但是，如果不是所有的功能和设计都能雪中送炭，那么就做到贴心的锦上添花吧
从排队等待谈进度条设计（本文出自Tencent CDC Blog）
排队等待是一种日常中常见的现象，例如新年领开工利是、去排队购买首发的苹果产品、每天中午去食堂排队购买午餐。排队等待在我们的生活中无处不在且看似是一个简单的现象。即使是种简单的存在，但也有其复杂的一面，当存在着很多条队列时，确定每条队列是做什么的就变得困难了；在加入队列后，人们会产生：大概要等多久？为什么队伍很久没有往前移动？等诸多疑问。无法解释的等待是令人烦躁的，不公平的等待则可能引发人们的怒火。　　经历过领开工利是的同学应该对于当天排队等待的回忆不会很糟，甚至觉得还不错，是一个值得回忆的经历，明年应该还会去参加。但经历过去火车站购买车票的同学多半会不愿意再去第二次了。不管痛苦还是愉快也好，排队等待有时是不可避免的，那有没有办法可以降低其中的痛苦程度呢？有心理学家曾对如何提升排队等待过程的愉悦感做过研究并提出了一些解决方法。近期正好也做了关于提升管家中进度条体验的优化设计，下面就结合进度条的设计来逐一介绍提升等待体验的设计方法。
提供清晰的体验概念模型　　概念模型可以使令人迷惑的产品或者设计转变为条理清晰和可以理解的。周围环境的语义符号（新年后上班第一天、曾经领利是的记忆、大屏幕上的排队指引等）可以让我们明白排在腾大楼下长长的队伍是去领新年开工利是的，而不是去食堂买早餐的。　　在使用软件的经历中，用户已经非常熟悉点击【扫描】按钮，出现进度条指示，然后等待扫描的结束这一整个过程。所以如下图所示，用户点击【快速扫描】，接着出现等待进度条，这样的操作概念是符合用户记忆，容易理解的，用户不会产生疑惑。
等待的过程应有足够的反馈　　忙碌的维护秩序的工作人员、时而往前移动的队伍以及后面不断增多的等待同学等信息都给了我们足够的反馈，说明距离领到利是的目标越来越近了且排队等待是合理的。　　想象一下，如果当进度条出现后，所有信息都是静止的：进度条没有移动、没有当前扫描进度的指示、没有变化的数字，这种等待让用户瞬间产生焦虑和不安，他们会疑惑&到底什么时候才会扫描完成？&、&到底电脑是否在正常工作呢？&。在做进度条优化设计时，就大量的提供了变化的信息，给出足够的反馈，让用户明白电脑是正常的，他们的等待是合理的。
符合或者超越期待　　我们在开始排队等待时常抱以消极的期望值，认为等待会是个漫长的过程。在设计时可以利用这点来作出符合或者超越用户期待的假象，这样可以对提升用户体验有所帮助。　　如果从技术上暂时无法提高扫描的效率，我们可以在扫描开始之前让用户有所心理准备，降低他们的期待。例如在扫描前可以通过弹框的方式提醒用户：扫描过程较为漫长，请您耐心等待。这样到最终扫描结束，用户可能会发觉其实扫描并不是那么的漫长，这也就变相的超越了用户的期待。
分散用户的注意力　　一个有很多事情发生的时间段会显得比在一个相同时间但没有任何事发生的时间段快得多。&度日如年&就是这个道理。经典的在电梯口放置镜子的故事就是利用分散用户注意力的方法来提升用户等待的体验。　　很多游戏的加载都采用了这种方法来提高用户等待的体验，比如七雄争霸在加载的过程中会出现&打地鼠&小游戏，将用户的注意力吸引到小游戏上，从而不会关注加载等待的事情。某款安全软件也采用了这种方法，当用户进入较长的扫描等待时，界面上会弹出气泡提示用户可以进入皮肤中心换换界面的皮肤玩一玩。从这点出发，管家也可以善以利用，如果管家有什么新的功能推出，可以采用这种形式向用户推介，即提高了等待的体验也起到了功能宣传的作用。
公平　　我们反感插队的人，对不公平的现象会产生愤怒。有心理学试验表明即使所有的队列都以平均速度来移动，不管人们在哪个队伍里，他们都感觉自己那队是移动得最慢的。这也是为什么最好的队列设计是只采用一条队列，这样人们会认为自己得到了公平的对待。　　回到进度条的设计，我们即使用再多的设计方法，其实也只是稍微减缓了用户在等待感觉上的慢。我们从根本上还是要提高产品自身的扫描效率和性能，让使用我们产品的用户受到的待遇是与使用其他类似产品用户所受待遇是同等的，最好是超越的。用户没有道理去忍受一款性能低下的产品带给他们的等待痛苦，这也就是让用户感受到公平是最基本的。
积极的开始，美好的结尾　　一个漫长的活动过程，在记忆中的感受重要程度排序为：结尾，开始，中间过程。其中结尾的感受对整个活动过程体验的影响是最大的，如果能在结尾时增加稍许愉快的成分，即使整体过程是不愉快的，用户仍然会对整个过程产生愉快的感受。　　进度条设计上也同样在开始与结尾处做了优化。在扫描刚开始，我们对进度条做了假移动的处理，进度条一开始会比较快的移动起来，其实移动的这段距离与实际的扫描比率是没有关系的。比如，有100个文件需要扫描，进度条每移动1%的距离代表扫描了一个文件。假移动就是让进度条一开始快速的移动10%的距离，其实在后台并没有扫描10个文件，可能只是扫描了1个文件。这样的做法会给用户一个积极的起步感，用户看到已经开始扫描了可能就会去做其他事情。　　美好的结尾通常在人的记忆中会占有很重要的影响力。在管家中，当扫描结束后会跳转到结果页面，在这个页面上会展现此次扫描的详细结果并且给予很强的成就感，比如没有发现病毒会用显眼的绿色对号，肯定的文本让用户确信自己的电脑是安全的。如果扫描出病毒或电脑问题，界面上会给用户明确的清除按钮和其他特殊情况处理途径，让用户能很方便的解决问题并使电脑恢复正常。当用户解决完所有问题后，会给出解决成功的成就感提示。　　生活中需求大于资源是常态，我们必须面对各种的排队等待。电脑的性能瓶颈也是暂时无法解决的，希望本文能对大家的设计工作有所帮助，让等待不再那么无奈。
与广告“互动”—情景互动式创意广告（出自”百度MUX”
早晨做地铁，正打盹的时候，忽然听到某网站的大名被一声声地呼喊着，顿时就把我惊醒了，现在有些广告做得都不怎么考虑用户的感受，在既没有美感又没有创意的前提下，强行灌输信息只会令多数人感到厌恶。广告本来起的是一个宣传的作用，如果人人看到都觉得烦，那就适得其反了。其实广告也有很多形式，平面、电视、网络等。通常我们看到的都是以上三种。这里，给大家介绍一个比较新颖的趋势&&情景互动式广告。
情景互动广告是指需要广告画面外的物体来参与，共同完成信息传播的一种广告形式。与传统广告相比，情景互动广告并不一定需要在公共场合突出位置，以大幅面、醒目文字和艳丽的画面博取注意力，而是建立在用户视觉经验、心理暗示和行为活动之上，根据广告目的预先设计场景，使得用户能够不自觉地参与互动体验各种广告信息，从而更生动、更形象和更丰富地传播信息。它除了互动性的特点之外，还具有非强迫性的特点，用户可以自由选择是随意浏览还是细看，避免了注意力集中的无效性和被动性。
常见的情景互动式广告大体可分以下三类：
一．创意与产品包装相结合生活中各种产品都会有一个精美的包装，大多数只是为了一个美观的视觉效果，但是当创意融入产品包装，它会产生一个多么美妙的感觉！
Nike Stadium系列鞋的鞋盒设计，小鞋盒，新天地，足球场有了，篮球场，排球场以后也会有的！
潘婷洗发露的去屑功能，看到头发上飘着几颗白色盐粒，会不会觉得特别不舒服？
整容医院的水杯，不知道整容后的效果？好的，先让你体验一番！既不耽误喝水也不耽误美观！
讨厌下雨天？给你一片阳光灿烂的天空，即使雨天也不例外。看到这把伞就会心情舒畅！
这个鼠标垫是不是让你浮想联翩，满足了手感，满足了想法，还有良好舒适度。难道你还不心动么？
二．创意融合周边环境让观众参与，是拉近产品与用户的直接方法，也是让用户深入了解产品的机会，传统的方式是当你正在逛街，销售员会发给你一些宣传单或者突然把你拉去做个测试什么的，这种事情常常让我们避之不及。如何让体验和用户的关系变得自然成为需要攻克的难点。
以上两则广告的形式已经突破了传统的束缚，而是借助大自然，加入光电等元素，将创意表现得淋漓尽致。
而这两个广告则给了用户一个亲身体验的过程，但是它并不突兀，恰到好处的利用了周围的环境。反而用户会觉得很有趣，没有心理上的抵抗。不仅起到一个美化环境的效果，还给产品做了有力的宣传！
利用井盖内冒出来的热气做了咖啡杯，实在太妙了！
再乱的头发也能梳理的很光滑。
连卫星都能吸下来的吸尘器，还愁家里的卫生不好么？
三．公益广告公益广告作为与前两类属性不同的一个类别，这里单独拿出来说一下，我们见多了的是公益海报、是几个明星出来拍摄一段视频呼吁我们爱护环境，关注儿童、是某个墙壁上用红色大字写的标语，可是真正看到心底的又有多少呢，几乎都是三分钟热度，过了就忘！以下这些公益广告将会给你一个触动心灵的洗礼！
这是07年戛纳广告金狮奖作品，奥美广告为英国卫生部和癌症研究所所做。清晰直观的告诉我们吸烟对身体的危害有多大，就像随身携带一颗威力无穷的炸弹！
我们所浪费掉的水对于那些极度缺水的非洲儿童来说是多么的可贵！这个创意很小，但在我们每一次使用水龙头的时候，他会提醒着我们要节约用水！
某个城市广场上放着的巨大的冰块，慢慢的融化，以小见大，警示南极州的冰川正在融化。
地球臭氧层就像那层透明的气球，一扎就破，它是多么需要我们爱护啊！
少用几张纸，就保住了一棵树木！
转：如何看数据，如何思考，如何设计，如何验证（/archives/434.html）
本文中的案例之前内部邮件里跟大家分享过，这次放出来，给更多设计师做参考////交互设计师很重要的一项技能就是读懂产品数据，发现产品存在的问题，进而去优化产品，最终验证优化的效果。这个过程可以分为几个阶段，也就是本文标题所列举的 ：1.如何看数据，2.如何思考，3.如何设计，4.如何验证。今天跟大家分享一个小的案例，结合这几个阶段，说说我是怎么做的。
案例本身非常简单，非常&轻&，没有什么设计上的创新，也没有运用多少高深的设计原理（但是最终的效果还是很赞的），主要跟大家分享整个过程里是怎么思考的，怎么让数据指导设计。
1. 项目背景
是我最近负责的一个项目。其中有一个环节，在用户完成捐助后，我们希望引导他把捐助活动的信息分享到社区上（如微博、开心网等等）。目的很简单，就是希望通过社区渠道对捐助活动进行宣传，让更多的人知道这件事，让更多人来献爱心。本次产品优化的考核目标是：在用户的捐助成功页面，让更多人去做这个分享。在初期明确考核目标非常重要，这直接关系到之后怎么去做设计决策，以及项目后期的效果验收。
2. 优化前的数据现在支付宝公益提供的分享渠道有：新浪微博、腾讯微博、开心网、豆瓣、淘江湖、复制页面链接地址（通过IM方式粘帖给好友）基本涵盖了主流的几个社区。（之所以没有人人网，因为它太恶心，这里就不细说了）原页面效果如下，非常淳朴、直白的设计，没有任何的体验问题。
相关数据（产品优化前15天的数据，剔除了3天的活动日造成的影响）：
＃ 通过新浪微博、腾讯微博、复制页面链接三个渠道进行分享的用户，占所有分享渠道用户的86.3%＃ 在此页面进行过分享的用户，占据全部访问用户的26.4%（此数据没有去重，既如果一个用户分享了多个渠道，那么会算多个用户。也就是说，实际进行分享的用户比例比这个数据要低。）＃ 开心网、豆瓣、淘江湖这三个渠道占比很小，几乎可以忽略
3. 思考通过上面的数据，明显可以得出这些结论：a. 我们平行的列出了6种渠道，但是其中新浪、腾讯和复制链接，通过这三个渠道去分享的占了大多数b. 支付宝公益前期的所有运营都花在新浪微博上，但是腾讯微博的分享量却也是非常的高c. 总体26.4%的分享率并不高，仍然有很大提升空间优化的设计方案已经呼之欲出：＃ 三个没人用的社区渠道是否有存在的意义？是否是页面上的干扰因素？是否可以直接砍掉？＃ 如果让新浪微博和腾讯微博的分享入口在页面上更醒目（如用更大的按钮），是否就可以达到优化的效果？btw，这些结论都简单到有点傻呼呼的地步，但是如果你没看到数据，你也不会太容易得到这个结论
4. 优化的设计方案按照上面的结论，我只是花了10分钟到微博上找按钮素材，就有了如下的优化方案：
之所以没有直接砍掉开心网、豆瓣和淘江湖的入口，只是不想显得这次改动太&大刀阔斧&。
5. 结果验证下面是优化后20天，观察的数据：
成果：＃ 对两个微博的引导做了强化，数据各自都提升了72.4%＃ 因为微博两个渠道的强化，导致&复制页面链接地址&的用户少了25.5%＃ 总体的，在这个页面上进行分享的用户，较原来提升了44.3%＃ 另外三个渠道，虽然降了，但是本来数据量就小，根本不在乎这点差别通过这些数据，我们可以认为这次轻量级的优化很成功，回报率很高。
总结当一个产品已经成型、稳定之后，我们会有更多的时间投入到优化的过程里，这时候就需要更大的发挥数据的作用。如果说在设计新产品时，80%的设计决策是依赖于设计师的经验和直觉，那么在后期的产品优化中，80%的设计决策则应该来自于数据。我们常常在一些书籍、案例、培训课程里面看到某公司某牛逼设计师某牛逼的设计，如仅仅是改了一个文案说辞就给公司带来百万级的收入增长。这些案例不一定是真的，却也并非不可能。细心观察数据，从小的地方去着手，身边的产品就有很多点供我们去挖掘。Anyway，本文的这个例子仅是抛砖引玉。另外，希望其中的各分享渠道的数据，对各位设计其它产品时有个参考。
交互细节分析——分页
&Vonnie&|&&|&交互设计
说说目前常用的三种分类显示信息方法：
常规翻页&&&&&&&&& 信息滚动翻页&&&&&&&& 滚动条
前者是横向翻页方式，后两者是纵向的信息翻页。分页作为很小的一个组件，大多数网站都不会花费什么精力去设计，设计也大同小异，用户已经使用习惯学习成本为0，但如果能够在细节上做的更细致贴心一些，用户的使用体验会有所提升。
一、 先来看常规翻页
1) 组成结构
& 上页+页码+下页
&& 跳转到__页/第__页&；
&& 确认&按钮；
&& 支持键盘操作；
2) 使用情景
当网页内容较多、不能在限定区域内显示完全时；为了方便用户在多个页面间跳转和快速定位（尤其是按顺序翻页），通过翻页设计提供多个页面间的导航。在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。
&& &分页的内容是什么类型？
&& &页面数量有多少？
&&&&查看最多的是哪些页面？
&&&& 手动全部翻一遍的几率
&&&&是否会不按顺序翻页，为什么？
&&&&是否会查看已翻过的翻页？
&&&&翻页是否在列表顶部和底部都出现？
&&&&&最后一页&是否一定要有？
&&&&列表顶部什么情况下有翻页？
按照用户心理模型，浏览邮箱内容时是反复浏览型，且页面较长，此时需要在顶部添加翻页，但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作，因此不必在顶部放翻页。
&&&&是否可以mouseover就显示页面内容？什么时候可以？
设计前考虑完以上问题，针对情况进行取舍设计。
3) 交互分析
&&&&Google翻页
搜索结果首次只提供10个页码；设计猜想：google开发者认为一般用户在这10页内就能找到想要的内容。
点击任何一页码继续浏览，发现后续提供的页码是：当前页+9；设计猜想：当用户往下点击页码时，google开发者认为前10页内容不能满足用户，于是将搜索范围放大。
但最多提供20个页码；设计猜想：但考虑到网页宽度还是不能继续无限制增加页码个数，于是设定最多一次提供20个页码。
&&&&&Baidu翻页
始终有第&1&页，中间用&&&表示未显示的页码；设计猜想：用户翻到后面页码也找不到想要的内容时，会返回第一页重新查找，此时第&1&页是home的作用。
选中页码和mouseover页码样式始终在一个位置不变，不需移动鼠标就可点击下一页，而后页码自动替换状态；设计猜想：瞄准页码点击较困难，可以减少用户瞄准位置的次数。但没有做完美，用户每刷新一个页面，还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中，减少鼠标瞄准操作。但也最多提供20个页码；
&&&&&Sina微博小分页
滚动翻页与翻页的结合使用；
上页与下页放在一起更便于点击；
通常情况下用户按&下一页&的情况最多，那么上页样式可以更简单些；
4) 用户心智模型分析
&&&&以Taobao搜索结果列表页为例：
用户输入关键词进行模糊搜索，然后出现相关结果列表，用户需要逐页翻看查找，此时&上一页&&下一页&使用最多,因此要设计的便于点击切换；或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的；前几页浏览的几率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好一直显示首页；页码数量不宜过长，不要导致用户视觉辨识困难；也不宜过短，以免给用户造成网站信息较少的错觉。
&&&&新浪微博信息列表翻页用户心智模型：
用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此&上一页&&下一页&用的次数最多；其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转；
缺点是会打断用户阅读，影响用户关注的主要内容。优点是条理清晰，便于分段查找信息，后台请求压力小；
与别的组件一样，分页不是单独存在的也要结合使用环境来交互设计。
二、 信息滚动翻页
GOOGLE图片
&&&& &无限滚动翻页&，当用户浏览到页面底部，自动刷新页面展示新的信息；
&&&& 连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮&查看更多信息&，引导用户去浏览其他相关信息；
&&&& 或需要点击一下才可翻页；
&&&&页面过长时须提供&回到顶部&按钮；
更多贴近用户心智模型，方便阅读浏览。缺点是当一段信息不能及时刷新出来时，无法跳跃浏览其下面的信息。
三、 滚动条
1) 滚动条与横向分页优先级
当同时使用滚动条和翻页时，该如何设计。翻页与滚动条的相辅相成，都是页面过长，为分段呈现内容的方法;
&&&&翻页在滚动条内部
设计猜想：滚动条到最底部方出现翻页。大概出自浏览器，滚动条内放页面翻页；
例如浏览器，是因为软件与其内容的嵌套关系；
&&&&有翻页也滚动条，滚动内容不宜过长（PC端产品）
设计猜想：滚动条需要拖动滑块浏览，如果滑块过短便更不容易操作；统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。
&&&&移动端产品则貌似无限制
设计猜想：不需拖动鼠标，移动端上手动点击是最方便常用的操作；
2) 分页不一定是click跳转的
有上下翻页同时能快速拖动浏览不同页的信息，适用于内容能够粗略浏览的页面；
1) 从信息的结构来看，传统翻页是横向信息分段显示，而&无限滚动翻页&属于纵向信息递增显示（随滚动页面信息增长）。
&&&&区分访问过/未访问过的页码样式，能更好的帮助用户记忆，不重复浏览；
&&&& 链接的可点击区域尽量大，方便用户点击，页码间距足够避免用户误点击；
&&&&清晰标识当前页位置，一般处于页码中部；
&&&&可提供批量翻页（如，下10页）；
&&&&页面过长时，增加&返回顶部&;
&&&&不需要&上一页&&下一页&时就不显示，如后者比前者使用更频繁，前者可简化成符号&；
&&&&显示总页数（当不显示总数时，翻到最后一页就不能再翻页了）；
&&&&&&上一页&&下一页&位置固定；
&&&&页码数量不宜过长（一下呈现过多导致视觉混乱，用户翻看页码困难）或过短（特别是搜索结果，会造成网站信息较少的印象）；
&&&&尽量使用首页和末页链接，且放在普通页码区外的固定位置；
&&&&除放第一页外，可选择放前面三页的页码，视觉上稳定些；
&&&&&避免花哨交互，精简；
&&&&页码过多时，允许跳转翻页；
2) 同方向分页的Tab与翻页很少同时使用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用，比如滚动条与翻页。3) 没有规定横向的一定是翻页，纵向的一定是滚动条，可以发散开来：横向为滚动条，纵向翻页，但此种方式似乎不便于操作。
所有组件的灵魂是用户操作方式。
关于“反馈提示”的交互设计
long.lil—交互设计 |
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
/logs/.html
反馈这个词儿其实是控制论的基本概念，泛指发出的事物返回发出的起始点并产生影响。在信息交互过程（输入输出）中，它是一种界面输出物，用以提醒信息输入者他的操作结果。它有很多种形式，包括界面元素、声音、影像变化和物理位移（如震动）等。我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息，为了加强区分避免歧义，我们这里姑且称之为反馈提示。这里分几个方面对其设计中应注意的事项加以简要说明。
页面上的反馈提示作为一种信息输出，最重要的属性要求就是迅速明确的被信息输入者所知晓，这也是对设计师来说最重要的设计原则。执行起来，可以参照两条具体标准：1.当前页面：反馈提示应该放在操作发生地的附近。
&根据心理学的注意力分配模型，不熟悉或十分关注的操作都会占据人脑相当多的注意力资源，若任务有延时反馈，则操作完成后注意力发生聚焦，投射在行为发生地附近，以关注产生的结果。简单点说就是，我在输入框中输入内容，若有任何问题，我希望反馈就在这个输入框旁边发生。这是再正常不过的交互与反馈了。这条原则对于有同理心的设计师们可以说是共识，他们普遍争议的是另一个问题，反馈与表单元素的相对位置究竟该怎样安排才最合理？实战派的主张&左右&，理论派的则倡导&上下&& & 但其实这一点并不需要太纠结，一般来说，如果宽度足够或不希望表单过长（想在一屏内解决战斗）、过于跳跃的话，那么把反馈提示放在表单元素右侧是可行的，例如淘宝的注册页：&
如果对象是有严格逻辑顺序（如纵向）的系列操作，那么反馈提示放在操作流向途中（对应的表单元素下面）则比较合理，并能达到更好的提示效果，例如淘宝的订单页：&所以，上下左右并不像想象中有那么大的关系，只要在发生地附近，用户都是可以注意到的，只是程度不同而已。倒是怎样清晰明确地表达反馈与对发生地之间的关联、不让用户产生迷惑显得更为关键，关于这一点，jQuery Validation 所提供的 Plugin Demo里给出了一个比较好的思路，设计师们可以考虑通过一些样式的改变来制造一些联系。
现在facebook采用的也正是这样的一种方式，它通过加粗的边线与箭头更强的表达这种关联性：&
2.刷新页面：反馈提示应该放在用户最渴望看到它的地方或最容易注意到的地方。网页的加载特性让我们的操作区域有可能会在页面刷新后消失于我们注意力的聚焦范围之内。新的页面中，紧张、&短暂失忆&的用户不一定会拖动滚动条来找刚才的操作区域（原来的聚焦范围也很快消失掉了），进而找到反馈结果。他们担心、茫然，渴望在新页面中一目了然地看到它。这个时候，把反馈提示放在新页面中的显著位置无疑是最佳选择，页面导航的下方和表单区域的上方都是不错的位置。&&
状态，样式：
关于状态和样式在这里不去做过多的探讨，注意两点：1.将状态分类（对/错/提/警等）并进行差异化设计是一个不错的办法，至少对你的中高级用户会有一定的好处；2.icon能起到明显的状态提示作用，但选用时需慎重，要明确，要友好，不要夸张。至于形式上到底需不需要有底色、带边框、配icon、长箭头等，对反馈来说并不必要，不需要很纠结，具体情况具体分析一下，只要能引起注意、表意快速明确并且不让用户产生迷惑，所有的样式都是值得尝试的。
虽然说最好的文案就是没有文案，但这只是个遥远的vision，现实中文案必不可少，交互设计师是应该注意一些的，它的好坏直接影响用户体验。首先你需要一个文案模板以辅助设计和保证统一性，业内比较认同的是&[状态+解释]+(解决办法)&的文案结构，一般来说，按照这个套路来，大体上都能保证文案的完备和明确。下图中都是同形式同指意的反馈提示，百度的说的就比YouTube要清楚。
&除了明确、清楚之外，文案还需要尊重用户的扫读习惯和个人情感：比如，你想表达一个or的关系，用&或&会比用&或者&好些，因为&或&字会让两边的主体内容在扫读的情况下变得更容易识别；再比如，你面向的是注重风水和彩头的商人，也许&恭喜，只差一步&&就应该写成&恭喜，还有一步&&，因为你的用户们对负面的文字和语义会比其他人更加敏感& &写文案比写文章困难，它需要更多细腻的心思和周全的考虑，在满足基本要求的同时还必须在狭小的发挥空间内体现出独特的产品气质，这是非常难能可贵的事情。如果你有精彩的案例，请跟我们分享吧！
出口，即上文中提到的解决办法，它可以是用户对当前反馈的非正常状态的解决途径，如图中的[?]；也可以是一个交互阶段结束后，系统给用户的操作引导，如图中的文字链接。在某些情况下，这些出口是十分必要的，这就好像当你告诉用户此路不通时最好指给他一条能通的路，当用户走到一个丁字路口时，你最好能告诉他是该往左还是该往右。
需要提醒的是，这种出口切忌太多，阶段交互结束后，对于思路中断并且茫然的用户来说，太多选择甚至比不上没有选择。按照用户心理需求和操作习惯排个序，最多放出两个，一主一次。&可以说有交互就会有反馈，反馈是交互设计中最前线最直接的一环，它的好坏直接影响产品体验。实际设计中，由于缺乏意识或项目时间紧张，设计师对这一块往往并不给以过多的关注，设计起来也比较仓促和盲目，这点需要特别纠正过来，在原型中期，就需要把表单元素的校验规则以及可能的反馈情况都设计好。这是一个良好的习惯。
转载：推广页面设计
这次主要拿我们最常接触的&推广页面&来举例。推广页面第一屏就是给用户的肆意印象，一定要抓住用户的心。这就是为什么当我们在做一个页面的时候需求方不停的在强调要热闹，字要大。其实他们想说的是这个页面的视觉要有冲击力，重点的地方应该用抓住眼球的设计元素。现在用户见多识广，什么包邮/免费/搬家/限量这样的词都不足以吸引他们。只有把握住用户的需求点，才有看下的动力。以wonderbra举例来说，这是一个神奇bra的站点，主要是介绍他们家bra的，整个页面营造的是一个封闭但是清爽简洁舒适的室内环境，有点类似更衣室的感觉。使用吊灯/便签/穿衣镜/沙发/等元素来完善整个房间，还有一个诱人的美女穿着bra展现生活中的不同状态（姿势 & -），这样瞬间拉近了用户和产品之间的距离。
氛围营造个人觉得首先营造一个氛围是必须的，这个氛围要很给力。越是富有意境的图形越能抓住用户的视线并快速传递所携信息。文字是直白的，图片是用线序的方式来抽托主题。我们要把这个活动/产品推广出去就好象我们在给用户秒速一个生动的故事。情节生动才会引人入胜。视觉设计师讲故事的技巧就是我们的表现风格。（眩光/实体/手绘/虚幻空间/平面&）标题凸显当一个空间氛围搭建好了，接下来所有的元素都要配合这个空间。标题是一个活动的点睛之笔。主标题一般都是精辟简短，概括了整个活动的专题商业需求。副标题一般是起解释说明的作用，描述该活动的利益点。所以在视觉处理上标题是要重点刻画的，将其拆分做一些形状，色彩，大小，字体，质感，排版的变化和突破是必不可少的。但是切记不要做的太过，以上提到的6种选2～3个即可，不然就脱离了整体的页面。排版设计人物等细节的素材的选择是根据最先制定的风格样式来完成的。怎样将这些东西结合在一起就是靠设计师的排版组合。这里会涉及到色调，构图比例，质感搭配的经验。
以这个推广为例子，拿到DEMO的时候，主标题是&清凉一夏，日本流行风&要营造一个夏季的氛围，我首先想到的就是沙滩/美女/夏威夷这样的一个场景，长裙/海浪是必不可少的元素，页面承载的都是服装的产品信息，所以要选一个有长裙的美女，接着就是想到木制/相册/便签/手绘风这样的质朴舒服的感觉。我想营造一个清凉的感觉就选用清新的蓝天白云做背景。为了凸显主题将背景颜色调灰然后整片叠底上一层沙滩，两个图层分界的地方不能很生硬，选用了墨迹的笔刷有一个点点沙粒被剥开的过度。开始做字体的时候想到的是红色，橙色有夏天烈日的感觉，但是因为是清凉，所以颜色不能过重。用夏威夷的手绘花朵点缀字体，在&一&的处理上放上一个实物的海螺，要这个标题更加的生动。下方的利益点文字比较多，不妨选用了手绘的方式表达。
剩下的事情就是整理和回顾，这是一个必不可少的环节。新人在做推广的时候普偏存在的问题就是脑中没有货？！什么货？那些看过的收集过的素材和表现技法，不知道从何下手。以下列举是一些氛围渲染的比较好的页面，大家可以根据这几张页面总结出一些表现风格，比如前两张的手绘跟实图相结合的方法。下次设计新页面的时候可以有意识的去尝试这个技法。3/4两张空间的立体感营造，对于多文字的排版很容易出效果。
转：字体图形化设计
PART1:为什么要字体图形化设计现代设计中直接从电脑里调出来的千遍一律的标准字体已经不能满足互联网用户日渐提高的审美需求,所以设计师要打破常规,能根据不同的需求,对字体进行独特的个性化的设计。同时字体的图形化设计有利于页面f氛围的营造以及更好的传递产品的特性以及功能等,特别是在推广页面设计的时候我们对标题文案(往往概括了整个活动的专题商业需求)进行特殊的设计处理,与其他的内容文案形成对比,引起用户的知觉兴趣,从而达到让用户有效的了解页面的重点信息。
PART2:字体图形化设计的方法与技巧在开始之前,首先先了解下字体设计最基本最基础的设计处理方法如加粗、变大、斜体、改变颜色或者字间距等，同时所有的高级技巧都是在此基础上进行延伸与扩展或者突破。
如网络流行的凡客体综合运用了字体设计如放大、改变字体颜色等的基本方法，文字与文字之间形成了强烈的对比，突出了重点，建立了良好的视觉层次与焦点。
改变了字间距，使文字与文字之间的联系更加紧密了，且运用了阴影等使之层次更加丰富。(1)字体变形在电脑调出来的基本形上做基础变形处理，在vi字体设计中经常运用到的技巧。
方案2比方案1的线条的处理更加圆滑，同时看起来也更活泼些（但并不是说方案2就比方案1好，需要视具体的情况采用合适的方法）&同时在做字体变形设计的时候需要了解分析其笔画结构走势以及其综合体现出来的&气质&与&感觉&。.
因为整个画面要营造出一种向上的气势，所以在设计处理上线条变的更加倾斜尖锐，强化其速度感和力量感。同时若设计关于女性产品的页面时，就可能会使用比较曲的、纤细的线条体现女性柔美的特点。小技巧：向优秀的英文字体取经。
推荐两个优秀的英文字体网站： 和(2)字形组合字形组合设计其实是抽象文字的具象化，即抽象的文字与具象的图形结合, 使受众能更加快速的理解传达的信息内容，并能留下深刻的印象！设计的时候最重要的是找到其两者之间的特征属性以及关联性。
(3)3D字体设计平面立体化，营造一种层次感与空间感，模拟物理使之更加接近于真实 ，也更有视觉冲击力，在3D字设计的时候无论是PS/AI还是借助3D软件辅助设计最重要是掌握其光影的变化以及形体的透视。
形体比较复杂的可以3D软件把握透视(熟悉AI的可以使用&效果&三维&挤压&斜面&等命令实现),同时后期可以使用PS进行处理，如加强高光阴影以及整体氛围的渲染等。
PART3:字体图形化设计在具体设计过程中应注意的点(1)网页设计主要是信息的传达设计,任何的设计目的的是为了让用户快速有效到其信息,同时不要为了浮夸的设计技巧而舍本逐末，首先最重要的是先保证其识别性；(2)字体不是孤立存在的,是页面内容之一,在设计的时候需考虑与周围的其他页面元素的协调一致，强化页面的整体氛围的营造。
转：产品中图形语言规范化的意义与过程
现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富多样，同样每一个产品随不断的功能完善和扩展，随着一个产品的&长大&产品内所需要用到的图标也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产品或公司的战略计划相适应，这时候在图形语言的视觉呈现，语义表达、识别性等层面就需要作一个全面细致的考虑了。我们来看几个典型的例子，回顾一下 Adobe 产品系列的成长过程， 从2005年 Adobe 收购了原最大的竞争对手Macromedia公司后，它的产品线得到了极大丰富， 而后在2002年Adobe确立了&Creative Suite概念后，后续的新产品持续推出，庞大的产品线以一种什么样的展现方式呈现在用户面前便成为了一项非常重要的课题。下图中我大致的列了一下Adobe产品logo的一个进化转变过程：
&产品阵容强大的Adobe帝国在CreativeSuite 3发布的时候为旗下全部产品Logo进行一个色环划分图，很好的呈现出各产品logo的色彩关系和一个完整的用色体系。&
我们再看一个例子，Apple公司在2010年和2011年先后将itunes与App store的Logo作出了比较重大的调整，到Max OS Lion版本时，两大平台级的产品新形象同时展现在用户Mac的Dock上。虽无准确的官方答案，但从一个是整个Apple产品资源应用来源和一个是娱乐内容来源的的两个具有类似性质的商业平台产品来看，它们显然是被Apple寄予相当大期望，在感观上看来，它们在被赋予更厚重、大气的形象这一改变，能够很好的服务于其公司的商业战略。
另外itunes 10的发布后侧栏的图标全部变成了单色，这一变化我认为是为了突出Store的资源核心区域，强调产品的平台性，和上述的分析一样，这个视觉表现层面的调整同样是为了整个产品的资源商业战略服务的。
那现在回到我们自己的产品，现在&我的阿里&作为一个网商用户的得力助手，用户的家，&我的阿里&内容与应用在日益的增长，系统越来越庞大，同样网站的视觉的图形语言的整理，解决原来积累已久的视觉表现&乱象&也日益的紧迫。在&我的阿里&视觉元素整理的第一步，众多应用图标是头一个切入点，我们从图标的含义，分类，尺寸规格、设计规则，风格表现等几个方面进行一个整体方向的规划，总结一套设计指南。&■ 在图标的分类上，我们将网站图标分为以下三类：一& 产品图标 （Logo）它是一款产品在品牌层面上的定义，指一个产品系统形象、定位和诉求的集中图形化表现，产品图标（Logo）起到产品或公司识别推广作用，通过形象的图形标识让用户认识、记住并熟识一个产品。
产品图标设计原则：1 能很好的诠释出该产品所承载的功能 和 所要向用户传达的产品价值和形象；2 图形容易被用户所记忆、熟知，而且有较强的排它性（不易和其它图标混淆）。二& 产品界面中的功能、工具图标在一个产品界面中，用概括精炼的形象来表示某一类功能或操作集合的功能性图形标识，常会有成组有规律的在某一功能模块中出现。色彩造型表现可以精致富有表现力，也可以简洁明了，质感单纯。
功能、工具图标设计原则：1 表意清晰明了，采用大家均已接受的特定含义的元素图形；2 视觉体验统一，视觉语言自成体系；一个功能模块里面的图标尺寸要有较好的视觉平衡性；一功能模块内甚至整个产品的图标的质感、色彩饱和度要统一；成套的多个图标内，图形语义要有较好的一致性。3 需要注意图标各层面意义上的继承性问题，避免让用户造成识别上的困难。三& 图形符号一般表现为直接的操作按钮或标明该操作的辅助标识符号，图形表现为简洁明了，用色简洁、扁平。&■ 在整站图标尺寸规格方面，虽然Web 页面的图标不需要像操作系统或者客户端软件那样，对图标尺寸有着严格的尺寸限制，但为了网站的视觉体验的规范性和统一性，&我的阿里&图标规范中根据以往图标各尺寸的使用情况来约定3种常用尺寸：48&48 pix 、32&32 pix 、16&16 pix，以后整站的图标根据各自的位置和需要，将有序的根据规则加上相应尺寸的图标，这样网站在图标符号展示层面上将会给用户留下一个规范、专业的印象。&■ 在图标的设计过程中还需要注意下面这些问题：
上图第一排蓝色的4个图标看起来会显得大小尺寸参差不齐，这是因为虽然觉得尺寸可以是一样的，但是外轮廓饱满的实心图形在给人的视觉感受上会产生放大效应，而第二排深色的4个图标大小看起来则会更加协调一些。在下图可以看到，外轮廓饱满的图形进行了一定的边缘收缩，来与其它图形达到视觉均衡。
这要求设计图标在符合约定的图标尺寸的同时，需要注意多个图标的视觉均衡问题，在制作成套图标的时候，根据这个规律来选择留白的空间比例。
此外单个图标要很好的把握外轮廓与图形形状的均衡关系，构成图标的图形需要尽量的接近一个正方块，使得图形饱满、平衡。&■ 在我的阿里应用图标风格表现方面为了使原来的各业务、应用图标和将来新增的图标能够实现非常好的统一性，我们做出了包括图标视角、构成元素、光源质感、倒角这些方面的约束：
图标的绘制视角为所组成物体的正前视角，在必要情况下可以有一定角度的俯视角。这样是既在大原则上保证了整体的统一性，但规则也不至于太过僵硬，仍有相当的空间让设计师去发挥创意。
整个 icon 元素为& 3个以下，最多为3个元素构成 ，组合方式以一个主体元素& 配合一个（最多两个）辅助元素。避免众多的图标，各自的图形符号多寡不一，避免在图形组合方式上造成的不统一。
图标的光源方向是正上方，图标颜色渐变方向是垂直方向的线性渐变，颜色从上到下由浅到深。图标的颜色渐变幅度较小，偏扁平感，渐变幅度不要太大以至质感过重。
应用图标约定的三种不同尺寸icon 的倒角的大小，以便在集中展示的时候在细节支出依然有良好的一致性。经过以上这样一套设计指南的规范、约定能尽可能的保证原来老图标和后期新增加的都能有一个规则可寻，对整个网站整个产品的品质方面，用户友好性方面能起到一个积极的作用。这里只从应用图标这一切入点介绍了产品视觉元素统一性的解决方案，当然网站还有其它各类控件模块，同样也需要实现类似的标准化统一体验，后面仍有许多工作需要开展。
大家好，欢迎来到我的小站！
站长在关注