这是一款超酷计算器作品，设计由产品设计师 Nikhil Kapoor 负责，拥有非常时尚的外观以及金属黑与金属白二款风格，第一眼就能让人喜欢。这台计算器的二款风格都是单色为主，另外有个共享的特色，设计师把视觉焦点放在「等于号」上，而且非常醒目。删除键的设计则是以触摸屏的形式。设计师：Nikhil Kapoor个人主页：https://www.behance.net/nikhilkapoor除了计算器使用简约时尚的外观， 它的包装设计也是非常精简的哦，使用纯色白色的包装盒，盒子的边缘像计算器一样的金属边框外形。原文地址：shejidaren ...继续阅读 (10)

能做出酷炫效果的登录界面，却依然成为不了设计师？建议阅读@可乐橙_ColaChan这篇译文，看看专业的设计师如何设计简单的登录界面。处理用户验证通常是事后诸葛亮，我们总指望它有用，但很少深入思考它。它应该足够简单，但事实是，无论对于用户还是运营产品的公司，都像是在自找麻烦。登录失败、忘记密码和冗长的交互。登录界面是你的应用中最常展示的界面之一。客观地说，75%的人都在登录时重置过密码，废弃了之前的密码。在企业内网登录中，忘记密码是帮助台每天处理的头号问题。通过清晰的表述和设计良好的流程，能极大的减少这些问题的数量。要提升用户验证的体验，降低服务成本，增加转化率，有几件事情要好好考虑。清晰说明规则△  亚马逊和阿里速卖通的例子避免使用模糊的规则，表述清楚。不要等到错误验证来警告用户，密码至少要6位。强调密码的最短限制是有意义的，但也不要太复杂。有实际意义的密码，比随机组合的字符更有用。显示密码△  亚马逊的例子可以考虑让密码可见。这对用户登录和注册有帮助。不用再次输入确认，用密码输入框来切换显示隐藏，帮助用户确认首次输入是否正确。显示和隐藏的功能可以用一个小图标、一行文字标签、或者勾选框来表示。亚马逊对此做了些小变化，把隐藏字符保留在输入框里，在下方显示完整密码。增强了用户的信心，减少焦虑，表达出密码被妥善处理的事实。忘记密码的处理△  Slack和Trello的例子没人愿意重置密码 ...继续阅读 (7)

今年春节期间支付宝发生了一次支付安全风波，这让我们再次意识到安全对于支付、金融类产品而言就是生命线。但有时候产品安全并不等于用户就有了安全感，本文探讨了对于支付类产品而言，哪些方面因素影响了用户安全感的形成，并从设计角度出发，期望在安全感的提升上做出一些总结。在这里抛砖引玉，期望能和更多对这个问题感兴趣的小伙伴一起探讨。一. 什么是产品的安全感？产品安全感指产品可以让用户信任的能力，一个可以让用户信任的产品，才能在用户信息获取、产品目标实现上成为可能。对支付工具或金融类产品而言，安全需求更是用户最核心的诉求。最近支付宝1月10日被曝光的“非密码登录模式下可能出现的账户安全风险”的风波，虽然支付宝并没有因为所谓的“漏洞”造成用户的资金损失，但造成了用户的强烈不安，导致大量用户解绑银行卡。安全感是建立在客观安全基础之上的一种主观感受，没有强大的技术支持、缜密的安全策略保障，安全感无从谈起，但并不是有了好的技术和缜密的安全策略用户就有了安全感。支付宝的账户安全风波发生后蚂蚁金服负责人在知乎上回应称：“安全不等于安全感。数据上显示这样找回登录密码的方式是安全的，我们就以为够了，但没有想到，这种方式其实是让不少用户没有安全感的。安全但没安全感，也会出大事。”安全感的塑造像用户体验一样需要所有岗位都有强烈意识和努力才能实现，它对用户来说是需要慢慢积累的。下图对影响支付产品安全感的因素进行了概括 ...继续阅读 (5)

三月的求职黄金期，一年中你离梦想公司距离最近的时机可能就在这个月出现，除了准备了一份简历之外，你还做了哪些努力？说到底，求职就是一个把自己作为“商品”推销出去的过程。作为设计师，尤其是做过品牌的设计师，有没有思考过，用品牌和营销的思路来推荐自己？很多人会一脸懵逼吧？What?品牌和找工作有半毛钱关系？如果你仔细思考过，尤其是这样的“跨界联结”能让你的求职除了海投，还能增加更多的独特性和命中率。在品牌、营销界，有一个十分经典的理论：【独特的销售主张】50年代初罗瑟·瑞夫斯提出，既经典的USP理论。 USP理论包括三个方面：每个广告不仅靠文字或图象，还要对消费者提出一个建议，即买本产品将得到的明确利益这一建议一定是该品牌独具的，是竞争品牌不能提出或不曾提出的这一建议必须具有足够力量吸引、感动广大消费者，招徕新顾客购买你的东西用在求职上，我来延伸一下每一条的信息重点：每个广告不仅靠文字或图象，还要对消费者提出一个建议，即买本产品将得到的明确利益—选择我企业主能获得什么这一建议一定是该品牌独具的，是竞争品牌不能提出或不曾提出的—我本身具有的“独特性”这一建议必须具有足够力量吸引、感动广大消费者，招徕新顾客购买你的东西—我能够为企业主带来长期可持续的价值如果能做好这三点，就是给了招聘的企业主一个没办法拒绝你的理由。如何把USP理论运用到求职实践中去？我来逐 ...继续阅读 (7)

随着大屏幕高清分辨率的普及，我们在打游戏、看电影、浏览美图时，总希望屏幕越大越好，这种视角上广度与深度的享受以及和沉浸式、聚焦的体验，是在小屏幕上完全给予不了的。图中可以看出5.5英寸以上屏幕可以称Phablet，7英寸以上就是Tablet。这次案例以Tablet设备为主，Phablet设备为辅进行体验设计。在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。一、探索痛点，明析思路案例分析：这种结构化消息是目前国内主流的一种设计形态。1.以消息为主的结构化设计:不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。2.信息内容碎片化:用户可以获取到更多信息，但因内容平均分布，所以画面不够聚焦。我们可以把这些内容信息看成点的组合，点的基本属性是瞩目性，能形成视觉的中心.当画面中有3个以上的相同大小点时，画面就会显的凌乱。当画面有不同面积的点时，较大点会引起人们的注意 ，依次会关注较小的点。3.以标题文字为主进行快速浏览：在浏览过程中用户通常以抓取关键词为主,快速吸引到下一级信息。而图片在大部分情况下会有被缩小，裁剪，因图片尺寸较小，从图中 ...继续阅读 (10)

想方案想的头大，一直在原地打转跳不出来？想了半天提出的方案，被老板说怎么没想到别的某某方案？有时虽然想出不少方案，但是实质在渐行渐远？不是人人都有特别灵活的脑子 ，就算是灵活的脑子也不会无时无刻都灵感无限，那在我们面对思维瓶颈的时候，有没有方法可以帮助我们快速且有效的去拓展思维呢？ 一．理性感性，缺一不可我们思考方案面临“脑衰竭”的时候，往往喜欢会用两种方式来寻找突破口：第一种是借助工具或方法进行系统性的思维梳理和拓展，比如Storyboard、Design Thinking、SWOT分析等等。但有时经过理性的分析思考，并不容易产生“惊艳”的方案，尤其是作为一名交互设计师，合理的逻辑思维优势虽然明显，但往往又是一种束缚。第二种是借助集体的智慧——头脑风暴，在脑暴的过程中有的人想到的是些功能，有的人想到些相关技术，还有的人想到些场景甚至是一种感觉，就这样借助大家不同的思维角度来进行思维的碰撞。其实无论自己思考还是集体脑暴，都不要放过那些刹那间的感性感知，有时会带来意想不到的收获！面对问题，每个人都有自己习惯的思维方式和方法，多数人在工作中更习惯用理性思维去分析和操作，也有能凭感性思维做出成果的人。这并没有绝对的哪种思维更好，只不过个人的擅长不同，但无论哪种思维方式，都容易有视野的缺失。将两种思维结合起来进行思维发散，快速有效的想出更多的方案，在工作中我慢慢琢磨出自己的一些方法来。其实 ...继续阅读 (5)

用户体验设计在即将到来的2017年会有怎样的发展呢？我们不妨通过回顾2016年UX领域的变化来展望未来一年用户体验领域的发展趋势。1. 可用性是UX设计的重心设计模式依然很重要。越来越多的设计师开始依赖强健而完善的模式化的交互来解决常见的用户需求和用例。现在基本的问题大多已经有现成的方案，那么我们要向什么方向努力呢？当你需要设计一个门把手的时候，完全不需要再重新发明一次轮子：你并不需要为了创新而创新，而是要在需要创新的时候，有目的、有针对性地开拓。当你想要为你的网站或者APP设计一套颠覆性的导航系统，从长远来看，这样的设计可能会存在可用性上的风险。这个时候，你需要静下来思考一下：当你试图引入全新的交互模式的时候，真的符合用户的预期和需求么？幸运的是， 现有的交互模式库和设计准则都会鞭策设计师专注于用户真正需要的、重要的东西，换句话说，就是用简单且用户熟悉的方式来做设计。反观成功的产品，它们大都符合基本的可用性标准和规则，尽管有人会质疑 Snapchat 已经没有了最初的“颠覆性设计”，但是它仍然是最成功的产品。专注细节，夯实基础现如今，产品可以很快满足用户对于可用性的需求，竞品之间可用性上的差距会很快被缩小，而真正能够区分高下的，是它们的体验。可用性的重要性已经有所降低，我们对于可用性的需求已经没有之前那么高了。在功能高度趋同的情况下，用户是选择Gmail还是雅虎邮箱，是选择Med ...继续阅读 (12)

无障碍设计（barrierfreedesign）这个概念名称始见于1974年，是联合国组织提出的设计新主张。其理想目标是“无障碍”。关注、重视残疾人、老年人的特殊需求。人类是拥有视觉、听觉、触觉等诸多感知“通道”的整合体，其中，无障碍色彩设计是一个面向所有公众的视觉设计系统，该系统的最终目标为创建无障碍可视环境，使信息尽可能准确地传达给更多的公众。在使用操作界面上清除那些让使用者感到困惑、困难的“障碍”（barrier），为使用者提供最大可能的方便，这就是无障碍设计的基本思想。本文便从视觉障碍人群的类别和色彩认知特点进行归类分析，提出用无障碍色彩设计来创建视觉信息的无障碍环境。颜色，在设计师日常设计工作中经常用来区分信息图形上的数据类别、层级关系和不同维度，是数据可视化中最常用的视觉变量之一。面对如此庞大的特殊受众，作为负责产品直面用户“第一张面孔”的设计师理应关注他们的需求，无论是线上或是传统线下设计皆是以向用户传递正确有效的信息为目标，更加不能忽视了视觉障碍群体。一. 视觉障碍视觉障碍主要有两种类型：一类是视力低下造成的障碍，依据其视觉障碍程度分为全盲和弱视；另一类是色觉识别障碍，我们通常笼统的称这类人群为“色盲(Color Blindness)”（也称为道尔顿症、色觉缺失、色觉辨认障碍、色弱等）。全球约2亿人患有色盲，普遍程度甚至高于AB血型的人群，他们在识别部分或者全部颜色 ...继续阅读 (5)

正所谓工欲善其事，必先利其器。想要成为一个优秀的设计师，工具的使用也是至关重要的一个因素。那么今天笔者就为大家带来交互设计师需要用到的工具清单。1. 脑图工具脑图是一个很好用的工具，笔者和笔者身边的小伙伴们平时在梳理想法的时候都是会使用到的软件。在这里给大家介绍两款软件。1.1 XmindXmind 的优点就是大、全。主流平台都支持，所以不用担心和其他用户共享文件的问题，同时支持各式各类的图形模式。可以说 Xmind 不仅仅能画脑图，各种商业用图都能够画。最重要的是，免费，使用学习成本上还算过得去。入门首选。1.2 Mindnode笔者毫不犹豫的说，Mindnode 可谓之脑图里面的最佳颜值。用过的人都说好，而且产品的设计对用户相当友好，安装完之后便可使用。颜值高，学习成本低，为何不试一试呢？2. 线框图工具线框图是交互设计中最重要的一个产物，是产品的骨架。好比是一个建筑的建筑结构图，一个优秀的产品被搭建起来，那么线框图尤其重要。下面为大家推荐一些常用的线框图绘制软件。2.1 OmniGraffleOmnigraffle 是 Omni 家族的拳头产品之一，也因为 Omni 的前缀，这款绘图工具不仅仅线框图软件，软件流程图，甚至于高保真视觉稿都能够应付的过来。同时，拥有大量的 Stencils，可以更加高效的绘制图形。易用性极高，扩展性强，不过仅支持 Mac 平台。2.2 Adobe ...继续阅读 (6)

你有没有在夜间使用移动设备的习惯？你觉得QQ现有的夜间模式亮度在使用时是否舒适？为了能够更科学的验证我们的设计，我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面，并总结出一套优化方法来分享给大家，相互启发。我们为什么要做夜间模式？1. 用户调研显示：57%的用户想要使用夜间模式，71.1%的用户习惯在夜间不开灯看手机在ISUX北京调研小组的帮助下，我们针对移动端QQ界面夜间模式进行了调研。从2000多份问卷数据中分析发现，用户对夜间模式有明确需求，且多数人在无照明下使用软件。2. 用户反馈现有界面夜间使用时刺眼，低亮度时界面文字不清晰调研发现，现有界面用户在夜间使用时感觉刺眼，长时间使用会感觉眼睛疼痛。部分用户认为文字看不清，辨识比较费眼。3. 用户期望更暗色 、更能保护眼睛的夜间模式设计从用户对夜间模式的期望来看，他们希望主体界面的颜色更暗，能够更加持久地使用软件。希望我们设计师，能够设计出更加保护眼睛的夜间模式。我们如何设计夜间模式？1.亮度、色彩对比度、通用性色彩是关键，行业趋势倾向低饱和无彩色*关注健康人眼特性——亮度的需求首先引入尼特值(nit)，它是用于量化亮度强度的专业术语，其意思每平方米烛光的强度：1nit=1坎德拉／平方米；白天，人的眼睛能适应亮度的值高于3.4尼特；夜晚，主体颜色接近0.034 尼特，最亮元素低于3.4尼特的亮度眼睛会比较舒适 ...继续阅读 (5)

前言蒙版引导一直是一个十分热门的话题，对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导，这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法（观点引自文章“Misused mobile UX patterns”）。但我认为这种说法过于片面，对于一些流程复杂或者功能个性的产品应用，添加蒙版引导进行说明，是十分有必要的。什么是蒙版引导蒙版引导（Coach Marks），从英文字面上的意思是指具有教育指示意义的引导标注。通常出现在用户初次使用产品的过程中，能够以最轻量的方式快速指引用户了解产品的使用方法或者新功能。现阶段用户打开一个新的产品通常会遇到各种引导提示（前置引导页，视频引导，弹窗提示，活动浮层介绍等等），区分于这些引导，蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形，总是能够简洁明了地告知用户产品的功能或者使用方法，并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成，同时也能够增加用户对产品的好感度。蒙版引导的应用场景蒙版引导的使用场景非常宽泛，根据不同的场景设计合适的蒙版引导，才能够最为直接的达到教育作用同时也不会对用户造成困扰。以下会结合案例来说明不同场景下的蒙版引导：1.阐述功能说明功能点是蒙版引导最常见的出现场景，通常会采用较为醒目的气泡或者箭头等指示性图 ...继续阅读 (5)

前言：工作需求每天都有，但总有一些冥冥之中会被更多人关注，如实事热点、周年庆典、大版本发布、热门合作等，那这些被更多关注的项目是否就是传说中的大型项目呢？视觉设计师在这样的项目中，又该如何发挥自己最大的作用，找到自己的最佳定位，保证高质量高效率的完成项目呢？项目需求中，往往会根据产品功能的优先级、重要程度、工作量级、影响效应范围、资源投入量等维度来对其进行项目级别的评判，如该项目需求能对团队、产品、品牌（甚至企业和社会）造成重要影响意义的，都可被认定为大型项目（重要项目）。也因其对团队、产品的意义区别于日常需求，所以相较于平常而言定会受到更多的关注和期待。视觉设计师作为输出线的中间环节，需要环扣上下游的整体协作，且作为用户浏览的媒体介质的设计者和输出者，在这之中的作用不可忽视。由于之前有幸参与了几次团队较大型项目需求的设计，对设计师在类似项目中的定位与协作方式积淀了自己的一些感悟和收获，在此和大家分享一下！大型项目类别一般情况下，大型项目可按时间划分为两种：计划型与紧急、突发型。 1. 计划型有可预见性，如传统节日、周年庆典、年中/年终大促，或有计划的大型改版、新产品发布等，准备时间相对充沛，且时间可弹性调整。整体设计目标以博人眼球、刺激高转化率或品牌的品质宣传为主。时间充沛的前提下，对输出的精度和效果自然需要更高的要求，这时我们须在日常需求的流程基础上增加更多的流程细节 ...继续阅读 (9)

图标设计是界面设计最重要的组成部分之一，作为UI视觉设计师，这项技能已经是我们必须要掌握的基本技能，那图标设计要遵循什么样的原则呢？这5个图标设计方法都是我实战后总结的，适合新手进阶学习。“识别性”、“符合行为习惯”、“原创性”、“易用性”···上面这些原则都是大的标准，在图标设计的时候起到了指导性的意义，但是这些规则其实都被大家说烂了，如果你对上面这几点还不太了解，可以自行百度一下，这里我就不多说了，我要分享的是能够帮助你提升专业度的一些实战经验，如果你所做的图标能做到以下这几点，那么恭喜你，你及格了！（本文没有对图标进行详细的分类，所谈范围也只是App中一些功能性图标的设计经验）还是先来看下大纲：像素对齐多用布尔运算独特的风格视觉大小的统一2017年图标的流行趋势预测1. 像素对齐我记得以前在小公司的时候，一个人负责整个app的交互设计与视觉设计，设计团队只有两个人，有什么问题都没人可以请教，当时困惑我最大的一个问题就是：为什么我做的图标总是发虚的呢？直到来了大公司和前辈们学习之后，才知道原来是因为像素没有对齐。我们来看下面这张图：图片背景的网格就是我们所说的像素网格，我标明红点是想告诉大家，第一条竖线做到了像素对齐，而第二条竖线没有做到。我们没有看到二者的区别，是因为现在是在矢量图形的环境下显示的，如果导出来图片就会变成下面这样：这就是图标发虚的原因，因为我们没有严格的做到像 ...继续阅读 (10)

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。一、有好礼貌为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序哎设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。1. 重点突出每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。反例示意此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。纠正示意去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。反例示意操作没有注册，让用户无从选择纠正示意首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。2. 流程明确为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。反例示意用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干 ...继续阅读 (5)

IBM的创始人小沃森曾说过：Good Design is good business. 毋容置疑，好的品牌设计能在受众心中留下好的印象，甚至会影响品牌的商业表现。在刚刚过去2016年，一些著名的国际品牌（也有一些是组织或机构）在自身的视觉设计上做出了重大改变：“让品牌更加年轻多元化”，“更适应移动互联网的”……特赞整理出了这其中10个最受关注的品牌Logo更新，看一看哪些是你关注的？Instagram作为当前全球最火的社交网络之一，Instagram在今年5月彻底更改了品牌LOGO，这一改变可谓是“惊天地泣鬼神”，每一个热爱互联网的人几乎都无法错过她的改变。Insragram上一版的logo堪称经典：酷似拍立得相机的小小标志，圆角间是怀旧风的纹理图案，泰迪熊特有的棕色，以及美化后的镜头和彩虹。但随着Instagram的发展，旧版的logo已经无法反映出这个社区多元化的特点了。在此基础上，设计者设计出了设计出了这款更抽象、渐变的、“代表着通向多彩世界的大门”的彩虹色镜头logo。尽管新设计受到了大量的吐槽，但令人惊喜的是，在该公司的其他产品，包括 Layout、Hyperlapse 以及 Boomerang 等logo也做了相应的改变后，从整体来看，似乎一切都变得好看了起来。除此之外，Ins整个产品的用户界面也大大改变，更加清爽利落，让用户更加关注“视频和照片”。改版故事详析：《深度 ...继续阅读 (5)

以iOS 10的锁屏界面为例，让你知道如何有理有据地分析一个界面交互的好坏。iOS说：“清晰度，咱俩分手吧”。以往的iOS锁屏界面非常简单直接，但是来到今年的iOS10，情况发生非常大的变化，在开始认真严肃地为大家分析（tucao）之前我想先说明一些东西：分析并写下这篇文章绝对不是为了黑苹果的设计大神们，因为我也不知道苹果的设计团队在做出这些决定的时候面对的是什么样的制约或有什么更加长远的目标。此文针对设计做分析，不是针对某人或某团队。iOS10的锁屏界面的交互方式时常让我感到困惑，我想探究原因。我们都知道，当一个产品或是某个界面所要承担的任务变得越来越复杂，需求越来越多的时候——尽管一些新添加的东西的出发点是为了“更加好用”，它总是趋向于变得更加难以设计，更加难以使用。为什么会这样呢？iOS10的锁屏界面或许是一个非常好的学习案例。这个新的锁屏界面这边就不再赘述新Home在硬件和机械上面表现出来的造诣了，本片文章专门分析在锁屏界面之下，用户与notification center（消息通知界面），widgets（插件界面），camera（相机界面），以及和其他元素的交互方式和体验。死于过多滑动操作来看看这张图——iOS10的锁屏界面用上了茫茫多的圆角矩形来承载你最近的未读消息。向右滑动：消息并解锁后可以直接打开相应的app，这一点与之前的iOS系统相似。（安卓则是无论向左还是向右 ...继续阅读 (4)

在正式开始之前，我们首先来思考几个问题：1、  在众多的产品中，我们设计的产品在体验层面是怎么样脱引而出的，作为设计师应该想什么，做什么，怎么做？2、  一个产品在多端的体验中，又是怎么样保持统一的体验效果。3、  如何较多层面的洞见用户诉求，提炼和总结成一个具体的、可衡量的标准，创造更极致的用户体验。百度三端首页每天数亿人使用，作为设计团队我们经过不断实践和反思，提炼整合确立了自己的设计观，通过以下一些案例分享其中一些经验，希望以此作为设计师工作思考的模板与参考。 一、“精确”— 带来多端统一的设计。随着智能设备的普及，浏览方式的多样化，百度首页也面临着多终端的挑战。如果缺少设计原则，就像走在钢索上的人，步步都可能是陷阱。因此在多终端的快速改版和保证品牌一致性并存的路上，我们一直遵循以下几项原则：统一设计来源、统一布局方式、统一视觉图形。统一的设计来源可以使多端拥有一致化的体验。黄金分割是最普遍也是最能引起人美感的。我们所熟知的蒙娜丽莎的脸、雅典的帕台农神庙等都应用了该比例设计。百度三端首页的排版设计也不例外。黄金分割点约等于0．618：1，百度pc首页的搜索区距页面底部是474px，整体版面的高度是768px，两者之间的比例是0.618，非常接近黄金分割。wise首页及padweb同样都是运用了黄金分割来规范搜索框的位置，让有规则的美，严谨的融入其中。统一的布局可以使 ...继续阅读 (4)

下划线一般在文档中常被用作增强注意，在过去打字机时代，下划线成为了唯一的一种文字强调方式，具体的操作方法是在已经打出来的文字上面退格，再在同样的地方打出下划线。而在网页中，可以链接的文字（超链接）下面一般都有下划线。在制作页面的时候，当链接需要下划线的时候，UI开发很自然的会想到使用text-decoration属性来显示，例如这样：以上显示的是设计稿和浏览器渲染的实际效果，我们会发现浏览器渲染的效果和设计稿有出入，主要表现在下划线的位置，这时候细心的设计师会要求你想办法实现他们本来想要实现的效果。可惜的是，在这几年的网页排版技术发展中，并没有更好的css属性出现来支持下划线的个性化设置，所以这个问题常常会被忽略。 这个一般在UI开发看来，可能觉得并没有什么问题，难道说不应该使用text-decoration这个属性吗？ 首先我们还是从实际想要表现的效果来说：能够支持换行能够改变颜色、线条样式和粗细能够被其它元素正常的包裹在所有浏览器都能正常显示以上特性其实text-decoration都只是部分实现，尤其是在表现的细节上让人觉得有些瑕疵，如果我们非要吹毛求疵，应该怎么办呢？ 那么，我们还有什么其它方法可以去尝试吗？ 以下是我列举的一些方案，我们一个个的来看：text-decorationborder-bottomtext-shadowbox-shadowlinear-gradie ...继续阅读 (6)

本文的课程简介摘自：网易公开课TED是Technology、Entertainment、Design(科技、娱乐、设计)的缩写，它本身是一场论坛性质的民间会议。 从大学时代就喜欢看网易公开课， 特别是TED这个版面的演讲， 演讲时间都控制在18分钟以内（TED演讲为什么有18分钟的限制? 百度知道的解释是这样的：温曼是美国建筑师学会的前任CEO，对于TED，他最初的想法只是要“办一个世界上最好的晚宴”。正是温曼设立下了几项最重要的TED会议规则：包括单一的主题，不设置问答环节以及最为出名的18分钟时间限制。温曼是犹太人，18这个数字在犹太教中代表着“世界生活”的意义。但是在他看来，设置成18分钟并没有那么多附加的意思。“15分钟太简短，但是如果设成20分钟，人们肯定会超时到25分钟，19看起来很奇怪，而17又是个素数，所以我最后决定是18分钟。”）1.设计使人快乐的3种方式——唐诺德·诺曼设计评论家唐诺德·诺曼在他的这个演讲上，剖析了设计给人带来快乐的多个例子，将目光投射到美丽、有趣、愉悦与情感这样话题上来。他还讲到了3种情感线索，并且认为那是所有成功的设计应当努力追求的。2.对设计的深入思考——菲利普·斯塔克设计师菲利普·斯塔克用了18分钟找到了“为什么设计？”这个问题的根源。不管你是否天才都要仔细倾听这个完美的演讲。3.产品的人性化设计、如何培养创造力和自信心——大卫·凯利演讲 ...继续阅读 (5)

之前在知乎上回答了一个关于“线框仔”的问题，其实对这个问题深有感触，我自己也曾经经历过这样的阶段，便写下了以下答案，希望交互设计师都能是真正的设计师而不是沦为“线框仔”。 选择交互设计师这个职业，我相信有很多人当初和我一样都是怀着一颗“用设计改变世界”的心，我们看着那么多伟大的公司正在用设计驱动着科技，改变着未来，我们为之沸腾。这说的可能有点大了，但是往小的说，我们至少可以通过设计让我们的产品变得更“美好”，我们从中获得一些成就感，但是事与愿违，在现实中，我们丢掉了一个设计师应该有的责任，失去了我们应该有的思考和行动，我们渐渐的沦为线框稿输出的机器，变成了一个可有可无的角色——“线框仔”。 其实很多交互设计师都有过这样的阶段，有过这样的阶段并不可怕，可怕的是，当你意识到你沦为了“线框仔”的时候，仍然不去改变。 线框稿是交互设计师最终设计方案的产物，做出高质量的线框稿是交互设计师能力的一个体现。但是只会画线框稿的设计师并不是真正的设计师，这不是交互设计师真正存在的意义。  个人总结以下几点可能是我们沦为线框仔的原因1.在“命令”和“撕X”中，沦为画图的机器。作为新人的时候，我们总是很听话地高质量地完成老板、客户、产品经理等种种角色给我们的任务，因为是新人感觉所有人都比自己的资历深，不敢质疑，也不敢开口辩论。在这之后也许你曾经试图推销自 ...继续阅读 (4)

徐萌萌：谈起视觉设计的学习，好像并没有谁能够讲清。视觉看起来很难和理性扯上关系，因为视觉是显而易见的，做之前没人知道要做成什么样，做完之后又很容易被挑战。有人说，学习视觉设计最好的方法是不断的做项目，我却不这样认为，闷头不停的做项目是没有前途的，时间久了，纵然软件越来越熟，但是稿子一定是越来越「行活儿」，最后画图就会成为本能，而留给思考的时间越来越少。有人说，视觉就是玩票，不用在意视觉到底能不能用上，先po概念上来，我也很不赞成这种方式，因为玩票背弃了设计的意义 —— 解决问题。从一分钟画小人儿测试说起我曾经邀请同事在一分钟之内用尽可能丰富的语言画一个小人出来，后来，同事们都被自己画的小人逗乐了，画的实在太滑稽。我自己也做了这个测试，发现一分钟其实很长，画一个小人根本用不了那么多时间，后面的几十秒白白被浪费，最后的几秒我加了几条无意义的装饰线。同样在短时间内的涂鸦，Von Glischka 就画的丰富，想必他肯定会画满一分钟，因为有很多可以画的内容，那些基本形之外的线看起来并不乱，非常妥帖的为衬托造型而存在。为什么我们在一分钟内不能画出丰富的图画呢？因为平时积累的少，思考的少，练习的少，脑子里很空。再看几个问题：无法在无网络的环境下做设计，严重依赖 Dribbble很难集中注意力，进入平稳思考的状态面对很急的需求，往往做不到60分的设计热衷“搬运”，画图全靠找参考发现没，那些我们经 ...继续阅读 (2)

在产品开发过程中，最常用的展现构思的方式一般来说是纸笔原型，最简单也最迅速，寥寥一画，一个大致的线框图就呈现出来了。但是如果想要把线框图表现得更完美，你还是有很多工作要做哒~YouTube上一位大牛在他的视频里展示了一套完整网络邮件服务的纸质原型线框图。由两个人合作完成按钮点击和网页跳转的展示，看起来逻辑思路都很清晰完整，但是对于当下的快节奏工作环境，制作和展示这样一套完整的原型还是颇为耗费时间。有网友问展示这套设计排练了多久，也有人担心纸片片的顺序被打乱，或者文件容易缺失的问题。相较于这种传统的操作方式，更高级一点的就是借助于各种线框、原型设计工具。也看到网上有很多关于这类工具的介绍或者总结，爆炸式的陈列出大把大把的工具，但是，你真的会用吗？授人以鱼不如授人以渔。所以，这里总结了一些常见原型工具的使用教程，希望对你有用。线框图工具 -Balsamiq这款工具据说是首创了手绘风格。界面和操作都比较简单，只需拖出控件，调整属性就可以快速的绘制低保真的线框图，手绘风格也很讨巧。网站上很贴心的在首页展示了一个3分钟的短视频，让用户即看即学。更多更详细的使用教程YouTube上也不少，比如这个2013年11月份制作的Balsamiq Tutorial，达到了65K+的观看量。交互式原型设计工具 -MockplusMockplus是一款非常简单易学的交互式原型工具，特有的链接点，让你轻松的在 ...继续阅读 (3)

sisi：曾看到网上一些帖子讨论UI设计师和平面设计师的差异，总结为思维方式的不同: UI设计师考虑用户习惯和易用体验，平面设计师专注于更具吸引力的信息传达。两者侧重不同但专业上有非常大的交集，信息传达的核心基础技能其实都是相通的。平面设计是如何表达一个事物，而UI设计是如何让用户更好使用一个事物，表达层面令人费解则卡在了使用的第一步。UI论坛有人吐槽:“不要用平面设计思维做UI”，然而许多UI设计师往往缺少平面设计最基本的意识。常见的平面设计基础问题平面设计的基础设计理论包括: 色彩构成、平面构成、字体设计、图案设计、版式设计等。平面设计基础能力可以概括为视觉化处理与传达信息的能力。UI设计在视觉化界面操作的阶段，与平面设计的交集是如何组织和处理每个界面的信息。平面设计中俗称的排版，把文字、表格、图形、图片等进行合理的排列调整，有效传达信息，并达到美观的视觉效果。1. 如何组织信息组织页面信息的首要任务是判断信息优先级，分清重要信息与次要信息，删除无用信息。化繁为简，降低视觉干扰。举个小例子，从一份简历，就可对一名应聘UI设计师的平面设计基础能力略知一二。首先对无用信息的判断（讲真，曾看到简历中还有体重信息）。其次是关键信息的组织排列、清晰表达。个人信息：姓名、年龄、照片、联系方式；基本信息：工作经历、教育背景、职业技能；其他信息:兴趣爱好等。数份简历扎堆时，信息有效快速传达是第 ...继续阅读 (4)

如何成为一个合格的UX设计师，怎样才能从菜鸟转变为设计高手，每天都有无数的设计师思考着同样的问题。凡事要做好，必须得回答这三个问题：做什么？怎么做？用什么做？看了这三个方面的问题，你就应该能够明白如何起步了。为此，笔者收集了一些资源并且做了归纳，希望对你可以有所帮助。一、做什么？既然是一名UX设计师，那么首先，你要知道什么是UX，以及UX和其它岗位的区别。The Difference Between UX and UI Design-A Layman’s Guide这篇文章中主要讲解了UX和UI的区别，到底什么是UX，什么是UI，作者不仅指出了他们的不同，还做了更进一步的比较。（还有薪资的比较呢。）UX vs UI vs IA vs IxD : 4 Confusing Digital Design Terms Defined如果你的疑问不只是关于UX和UI，还对IA和IxD也不明白，那么Becky的这篇文章绝对会帮到你。这里不仅解释了UX、UI、IA、IxD分别所代表的意义，而且还针对工作内容的不同推荐了一些简单实用的工具，可谓是一举两得。二、怎么做？在你从宏观上明白了UX到底是什么，UX设计师的工作内容是什么之后。你需要明白：设计的成败，往往取决于细节。When to Use a Switch or Checkbox开关按钮和复选框，似乎看上去功能比较相近，但是实际上他们之间有这 ...继续阅读 (5)

作为设计师，我们总说：我要让我的设计更漂亮和高大上，要完成老板的业务目标，要让多数用户的体验顺畅。我们总是优先考虑大多数人和强者的利益，然而世界是多样和公平的，除了这些我们眼中的“目标用户”和“大多数人”，还有一群被我们忽略的弱势群体一样需要被设计“庇护”到，所以今天，我想说说包容性设计。等等，不要以为我要站在宇宙中心呼唤爱，包容性设计并不等同于专门为弱势群体所做的设计。之于弱势群体——包容性设计是温暖的，他们不会感觉自己是被抛弃或者被特殊对待。之于企业——包容性设计是商业的，根据长尾效应，如果我们做设计的时候考虑到了极端的情况，长尾部分的用户也蕴藏着巨大的商机，如图。之于设计师——包容性设计是一种有用的设计方法，类似于运动员在脚上绑沙包跑步这种训练方式，将自己置身于最难的境地，如果连最难的case都解决了，一般的情况是不是易如反掌？英国标准协会（2005）将包容设计定义为：“主流产品或服务的设计能为尽可能多的人群所方便使用，无需特别的适应或特殊的设计。”是什么disable了我们？从某种层面来讲，其实并没有所谓normal people和disablepeople的区分，只是我们每个人的各项能力（capability）有所差异而已。举个例子，《穿普拉达的女王》里有这么一个片段：新入职的安迪双手拎满了大包小包，同时捧着四杯滚烫的星巴克，需要拉开办公室的门，可以想象她做起来有多艰难。 ...继续阅读 (3)

iOS从07年第一代iPhone发布时的iPhone OS，已发展到今天的iOS10，这些年来，iOS从最初的一个简单、粗糙的ROM，发展成现在手机ROM中体验标杆的操作系统。设计风格走过了拟物化，扁平化，今年已发布的iOS10，设计风格也开始偏向卡片式风格，随着新的交互方式3D Touch的加入，开始脱离单调的扁平化设计，卡片式风格让设计语言更加符合用户的操作认知（卡片式的内容，对人有更强的按压操作暗示）。△ iOS10锁屏Widget界面手机友商的跟进苹果的设计，给大家的印象，总能精准的发现用户的痛点，在合适的场景下，创造眼前一亮的设计。如手机屏幕下滑出现快速搜索（Spotlight Search），屏幕下边缘上滑出现控制中心，这些设计创新，都能引起行业内的友商迅速跟进。Vivo的控制中心的设计思路与iOS几乎一致，操作方式都是从屏幕下边缘上滑出现控制中心。上图从左至右，依次为iOS10、MIUI、华为EMUI系统设置界面。很多手机ROM的系统设置，都沿用了苹果的一套设计模式，将系统设置项，用列表分组展示，同时将不常用设置项，收纳在二级界面中，如左图，iOS将更多设置收纳在【通用】中，小米则为【其他高级设置】，EMUI则为【高级设置】。交互细节亮点苹果在交互细节上，也能深刻洞察用户使用场景中的操作习惯，抓住用户的需求和痛点，针对用户该使用场景下，可能的行为，去做针对性的设计。夸 ...继续阅读 (5)

作为设计达人的你，目前正在用哪些设计工具来工作呢？如果非要做选择的话，你认为它们中，哪些是最适用于做原型、线框图、信息架构、用户测试或者活动管理的呢？事实上，我们中大多数人，应该是倾向于选择便宜、又不需要进行安装，同时能提供良好用户体验的工具。随着各类工具的涌现，要找到一款符合自己心意的工具并非易事。因此，我在这里精心挑选了一些基于桌面端的原型工具，包括国内和国外的。同时，你也可以花几分钟快速浏览下面的UX设计教程，相信你会在阅读后对UX有更深的了解。（一）UX设计工具推荐随着时代变迁，越来越多的工具倾向于往桌面端发展。这类工具的好处之一，就是让设计人员能够独立于PS、Illustrator等绘图工具外工作。同时，它们包含有很多交互效果，无需掌握编码或者编程知识。具体有哪些工具呢，我们一起来看看吧：1. Axure — 这是一款功能齐全的原型和线框图软件，可用于创建、测试以及分享你的设计作品。从学习成本来看，Axure会是那些有复杂交互需求、同时有具备丰富设计经验人士的最佳选择。2. Justinmind — 这也是一款强大的工具，用于高保真原型和线框图的设计。对于大多数新手来说，掌握这款工具是要耗些时间和精力的。3. Mockplus — 简单、快捷的原型设计工具一枚，拥有200多个高度封装的组件和3000多个图标。此外，可视化的交互设置和，将会是你设计道路上的好帮手、好朋友。4 ...继续阅读 (6)

做原型设计时，我们往往感觉图标素材不够用，尤其是矢量图标不够。矢量图标是矢量图的一种，这种图形也叫做绘图图像，是各种设计中比较常用的图片格式之一。因为其是根据几何特性绘制，并且通过数学公式计算获得，所以，矢量图最大的特点就是可以无限根据设计需要放大或缩小，并且不会失真。那么，这么好用的矢量图标，要到哪里去找呢？今天我就和大家一起逛逛国内外比较常用的矢量图标的网站。1. 阿里巴巴矢量图标库在国内来说，Iconfont.cn可以说是国内设计师们的一块宝地。这是一个由阿里巴巴的UX部门推出的在线矢量图标分享管理平台。这个网站上的矢量图标数量在1000个以上，而且更新也相对比较活跃，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。在该网站上，下载矢量图标是不需要登录的。2.EasyiconEasyicon作为图标分享平台，在数量上可以说是国内屈指可数的，总计50万个左右，而且数量仍然在不断增长。矢量图标在这五十万个图标中占比很大。而且图标不仅是黑色和灰色，如果希望提高设计的保真度，在这里还可以找到彩色的矢量图。同样的，这个矢量图标分享平台目前还没有限制用户必须登录才能下载。3.懒人图库懒人图库一直专注于提供网页素材下载，其内容涵盖网页素材，矢量素材，JS广告代码，小图片，网页背景，导航菜单，PNG图标等，让任何一个网 ...继续阅读 (3)

访谈是定性研究中最基础的方法。相对于分析客观数据的定量研究方法，不论是一对一的深度访问还是一对多的座谈会，都会产生研究人员与用户的互动，而互动关系会极大影响到访谈的质量和效果。很多人认为访谈就是“问答”，研究人员按照研究目的设定一系列的问题，通过询问用户，获得相应的答案，看上去似乎比定量研究简单许多。然而事实上并非如此。访谈是需要对用户的态度及行为做研究分析，而出于每个人的自我防御心理，用户很难将自己真实的想法告诉研究人员。如何获得用户真实的情感态度，是非常考验每一位研究者研究技术的地方。下面就结合之前的项目经历，跟大家探讨一下访谈技巧的问题。一、营造安全轻松的访谈环境轻松的访谈环境能够降低用户的防御心理，而这个环境包括访谈的物理环境（如会谈室的布置）及文化环境（如访谈用语）。1、物理环境安全及温馨的环境：安全私密的环境；暖色调的布置；舒适的沙发及靠枕；明亮适宜的灯光等。2、文化环境安全的位置：用户尽量要坐在面对着门的位置，背对着门容易激发用户的不安全感。被倾听和关注：研究人员需要身体前倾，并且时刻回应用户的反馈。再用户侃侃而谈时，也需要通过眼神或者点头等动作告诉对方你正在认真倾听。熟悉易懂的用语：研究人员常常犯的一个错误，就是把用户当成专家，使用行业术语去跟用户交流。举个例子来说，之前访谈过程中，发现很多用户其实都不知道“活期理财产品”和“定期理财产品”的意思，在用户的世界里，只 ...继续阅读 (5)

HTML5，也就是我们常说的H5，它是一种标记语言，主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面，一是丰富的动效支持，二是查看方便。H5近年来越来越受到人们的喜爱。但是，使用H5做开发，并不是人人都能做的，需要大量的编程语言和开发的基础，而一些所谓的简单设计H5的工具功能又不完善。如果我不会js，不会HTML5语言，怎么能做出一个“类H5”的简单App呢？作为产品小白的熊先生最近正在闷头做原型，在制作的过程中忽然发现，自己的设计其实完全可以应用到H5网页这样的推广当中。最近正在做一个旅游相关的app，那么我就帮忙帮到底，做一个旅游活动推广的“类H5”推广原型吧。开始之前，我们需要确定一个原型设计工具，就用Mockplus好了，最近一直在用，拿来也比较顺手。然后，列好大钢，编辑项目树。良好的规划是优秀的设计中必不可少的一部分。接下来，我们开始页面的设计。第一步：载入动画。载入动画是H5页面标志性的效果之一，“类H5”当然也不能忘记这一点。方法：导入需要的图片，根据页面的内容，设置某些组件为不可见；拖拽它们各自的链接点设置“载入时”显示自己的交互效果。并且给部分组件设置上移动的动画效果，使得整个页面更加生动。第二步：设置交互效果。使用原型设计工具来设置“类H5”网页最大的优势就在于：原型设计工具有更多的交互效果， ...继续阅读 (5)