对于许多初次尝试信息图形化设计的同学而言，如何把杂乱的信息转化成有条理的图形化设计是一个巨大的挑战，往往抓耳挠腮却无从下手。在这里，本君总结了四种极其实用的设计方法，希望能够帮助陷入泥沼之中的同学早日脱困。第一种设计法，本君称之为杂志插图法  所谓的杂志插图法，就是将全部信息提炼出一个核心点，然后以此为基础完成一大张信息图形的设计，非常类似杂志里的插图。这个设计方法简单实用，只要完成核心图形，其他信息无需过多解读，只需合理排版即可呈现惊人的整体效果。尤其当你面对巨量文字信息感觉手足发凉的时候，这种方法一定不会让你失望，能救人于水火之中。 第二种设计法，本君称之为节点线路法  各种时间节点，各种事件节点，各种关键词，这些本身就已经是现成的设计元素，其实根本无需多想，用节点线路法很轻松就搞定。时间节点的串联，就是时间轴。事件节点的串联，就是事件流。各种关键词节点的放大缩小，配合各种颜色和外形，很自然就形成了关键信息示意图。这种方法对付各种节点和路线的信息呈现，那真是百试不爽，屡试屡爽，简直不费一个脑细胞，就沉醉在创意的海洋里。 第三种设计法，本君称之为数据包装法  这种方法就是将各种数据包装的更美观，毕竟一堆枯燥的数字摆在那里，既枯燥又乏味，如果不是专业人士，谁愿意坐那里啃一堆无聊的数字。如果能把这部分内容 ...继续阅读 (22)

编者按：不论是UI设计师还是网页设计师，每天都在同字体与文本打交道，可是我们真的了解文本/字体 对于界面的意义和功能么？Viljami Salminen 今天就来帮你刨根问底，从根子上开始帮我们普及UI界面中字体与文本的使用之道~早在2004年，我刚刚开始职业生涯的时候，sIFR 还是一个特别火的概念。Shaun Inman 所创造出来的这项技术，通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下，对文本进行更为细腻准确的效果渲染。（ 使用sIFR你可以任意定义WEB中的文本字体，即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果，可以平滑消除文本锯齿，你可以像使用用CSS控制文本一样轻松得到各种文本效果）而在当时，这项技术是在Firefox和Safari 这样的浏览器当中使用自定义字体的唯一途径。不过由于这项技术极为吃内存，让它在几年内很快过时了。而2007年所问世的iPhone 甚至直接同Flash 技术划清界限。说回文本和字体本身，作为界面中最重要也是最常见的元素，它本身也承载着样式、传递不同的信息，可以说是界面设计中的一个核心分支也不为过。2008年，主流的浏览器最终还是选择了支持CSS3的@font-face 规则，这一规则在早期的CSS中也存在，但是在1998年的时候被剔除掉了。CSS3的这一改变令人振奋，我正好将这一技术运用到一 ...继续阅读 (5)

为什么UI设计中，用户的个人头像大多是圆形的？大舌头藉由归纳网路社群中专家的讨论，逐步厘清这个秘密大家有没有觉得有越来越多的平台或App ，喜欢使用“圆形” 作为用户的“个人头像” 形状。该不会是近期的设计风潮？还是大部分UI设计师的爱好？或有其他特别的原因呢？大舌头藉由归纳网路社群中专家的讨论，逐步厘清这个秘密，内容精彩不要错过喔 ~ 个人头像的定义与发展： 随着网路用户族群快速增加，他们对于藉由平台与其他用户互动的需求就越高，也因此发展出许多可互动的平台类型，例如论坛、信箱、聊天室、部落格到社群等。其中每个用户都代表着一个独特个体（无论是真实身份或虚拟角色），这些个体会有相对应的资讯，以及代表个体的个人头像。而个人头像通常是具个性化（用户觉得能代表自我）的标志，大多以平面或3D图像的方式呈现。 UI上的个人头像英文为”Profile Picture”或”Avatar”，其中Profile Picture在字义上较容易理解，反倒是Avatar，各位读者可能会充满问号，因为大家对Avatar的印象应该都是阿凡达电影（蓝蓝的那出XD）。根据techpedia平台上的描述，Avatar一词出现于1985年，由卢卡斯电影公司（Lucas Film）内发展线上角色扮演游戏（Habitat） ...继续阅读 (24)

在写这篇文章期间，提前做了一个小范围的调研，征集了一些设计师在工作中出现高度专注、高效、甚至灵感迸发，“有如神助般的感觉”时的状态，感觉和触发原因。摘录了几条设计师给我的回复：有的哦。就是做自己比较喜欢的设计的时候，又相对擅长的东西。过程不会太顺利会有些挑战，又不会难到过不了。就会一直保持状态灵感跟执行完美契合的瞬间一般这种时候会出现在晚上、躺下后想法突现、起来完成它、最长的一次纪录是到了早上六七点、我也特别喜欢在舍友睡了或者最好是一个安静的环境下做自己的事、很舒适、也不易别打断当你有 非常娴熟的技巧 任务的难度也处于合理难度的挑战的时候 你会进入flow的状态 五种激素水平会增加。人脑的处理速率是110KB 当你完全flow的状态的时候 大脑会无瑕感知 自己身体的情况 处理生理的信息。在找到一些让自己很有feel的素材时，再结合自己实际要做的平面设计，有点类似东风到位的感觉，就希望不要有人来打扰，也不会注意做完的时候是几点，整个初稿出来以后的成就感一般人真的不懂。有，就是憋了很久的一个需求，想破脑袋都没想到东西。然后休息了一下看了些别的东西，放松的时候突然灵感就来了。这时候简直是抓住一切方式把想法记下来，闸一开还停不下来，设计到一半又遇到坎儿了还能马上再蹦出来一些想法。这时候完全不会去理会外面的乱七八糟，只想猛猛地去做哈哈哈哈这种情况经常在我已经把问题想好，开始动手做的时候出现的 ...继续阅读 (9)

导语：现在在网页和H5中使用动效已经成为一个大的趋势，随便打开一个H5都会看到一大堆跳动的元素在那里向你招手：看这里！看这里！但在这样的滚滚大潮当中我们是否应该思考一下：真的需要这么多的动效么？为什么需要？需要什么样的？这样做真的解决问题了么？动效这个话题当下已经非常火热了。在这个骚动的年代，设计师很难再做一个安静的美男子了。一个静态死板的产品很难再去打动用户那颗挑剔的心了。但是！在我们热火朝天往画面上添加各种动效的时候，我们是不是应该在心里问问自己，这么做真的对吗？凡事是否都应该有个度，或者说是平衡点，动效当然也不会例外。下面我们就从“为什么动？”“哪里动？”“怎么动？”这三个方面来说说我们的一点想法：一、为什么动？ 首先，为什么要动？可能你会想到以下几条理由：1.这让我的作品看起来很炫酷，碉堡了！2.动效会带来流量，助我完成KPI！3.别人都这么做了，我也得做！4.编辑让我这么干的！ 呵呵，你要这么想就完了。那么该如何衡量一个动效是否应该出现呢，我们认为有几个考核标准： 1.这个动效是否会影响性能？首先，这个动效是否会影响性能？这个是最重要的，添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。例子：化身间谍比如这个例子，这是一个穿越情景的过场动画，随着年份的倒转背景出现各 ...继续阅读 (17)

据Colour Blind Awareness的统计，总人口的4.5%是色盲。如果你的用户多数是男性，则这个比例还要上升到8%。人们常常忘了为色盲设计，因为多数设计师不是色盲。本文中，我们提出13条建议来改善色盲用户的体验——这些对视觉正常的用户同样有益。色盲是什么？有许多种类的色盲，但最终都能分成这几类：无法清晰辨认颜色、色彩混杂、无法区分特定颜色。这些问题在特定环境中愈发严重，比如浏览网站。这包括低分辨率显示器、糟糕的光线、小移动端屏幕、远离大屏幕电视而坐。仅仅依靠色彩建立可读性和可见性，会让网站难以使用，最终影响了阅读和销售。尽管下面这些建议并不全面，它们确实涵盖了色盲用户浏览网站时遇到的主要问题。1. 文字可读性要确保文字容易阅读，它就应该遵循可读性规范，结合字色、背景色和字号：“WCAG 2.0的AA级标准要求，普通字号的对比率要达到4.5:1，大字号的对比率要达到3:1（大字号是指14磅的加粗或加大文字，或者18磅及以上字号）”——WebAim色彩对比检查器下面列举了一些颜色和字号组合，有的达到标准，有的没有：这表明了颜色和字号的组合形成了怎样的反差对比。(查看大图)2. 背景图上的文字背景图上的文字处理起来很微妙，因为图片局部或整张图都可能无法与文字形成足够的反差。文字没有蒙层，直接覆盖在图片上。(图片来源：Jay Wennington) (View large ve ...继续阅读 (56)

最近，我(原作者)在一个安卓VR app项目当中负责界面的设计开发工作。对我个人来说，这是一片从未涉足过的全新领域，因此感到无比兴奋，并希望将自己一路上所学到的经验分享给各位，同时也想通过这种形式对自己的一些设计方法和解决方案进行总结。为了使内容结构更加清晰合理，并更具实战参考性，我参考了IDEO的设计思维理论、Toni Parisi所著的Learning Virtual Reality一书(以及更多VR相关书籍)，还有来自UX Clan的The Weapon for Digital Product Jedi一文，并决定将本文话题聚焦在整个设计流程当中的以下几个阶段：探索与研究技术需求与局限脚本、信息架构、功能与内容草图界面原型GUI设计探索与研究随着技术与应用理念的不断成熟，VR将有可能成为我们日常生活的重要组成部分，并在以下这些领域当中带来令人激动的全新体验模式：视频游戏最为典型的应用领域。当你和人们说起VR时，多数人立刻会想到游戏 – 深度的沉浸感，忘我的全身心参与其中 – 这些体验需求使开发者、游戏主机及周边设备厂商们望眼欲穿。可以肯定，如今多数的VR团队都渴望在这一领域当中分得一块蛋糕。社交在VR技术的推动下，用户自主创建并互通互动的虚拟世界同样可以成为极具真实感与自由度的全新社交舞台。诸如High Fidelity(由Second Life的创始 ...继续阅读 (15)

你知道么？每个移动客户端产品或APP都有列表页！一、列表页是什么？在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章中有这样一段话：列表页是一个由若干可选择对象所组成的队列。在手机端，列表页是一个很常见的组件，它是由手机这个特殊媒介的特征所决定的。手机端的内容呈现和pc端不同，有一定的阅读局限性，一个页面只能表明一个信息，同时上下空间可无限延伸。对交互组件做定义很重要，应该从现有的基本概念出发，来定义全新的交互对象。而不是将列表直接定义为一个貌似纵向排列的表单，这样就限制了交互的创新设计，典型的列表是纵向，但九宫格式和一些标签形式也属于列表形式之一。最近进行的一个儿童《手机印品商城》应用，42个页面有80%以上是列表页结构，越发的重视列表页的作用。 二、列表页设计注意要点？1、明确列表的目的，目的决定形式列表页要达到的目的无非有几种：（1）概观性，列表可以提供给用户一种概观性的方式来呈现内容。图01图01是一个携程旅行，首页导航用了分类概观性列表的形式，用户一目了然看到四种分类：酒店、机票、旅游、攻略。分别用四色和大图标区分，对于信息较多的列表仅一个层级是不够的，这四个分类又各自做了四个二级分类，并且在文字和图标上做了缩小的概括性处理，用户短时间迅速能了解自己需要操做的分类在哪里。（ ...继续阅读 (17)

斐波那契螺旋线，也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线。一、logo中的黄金比例在很多设计稿，我们都听说过关于黄金螺旋线的说法，很多人觉得它神秘又深奥，其实究其来源，也不过是一串神奇的数列，是的，大概就是下面这个样子：由上述一串复杂的数列，可以得出一条非常漂亮的螺旋曲线，而这条曲线，在很多设计稿上都可以见到。最出名的莫过于苹果公司的logo：还有巴西Boticario公司：甚至，这个：从上述的例图中，拿苹果的logo来分析，在苹果logo辅助线分解中，我们可以看出苹果logo的设计正是采用半径1,1,2,3,5,8,13的圆切割而成，也就是上述我们说的斐波那契数列。这种曲线最大的特点就是它的迷之完美，所有的比例都显得恰到好处，让人感到身心舒畅。 名画《维特鲁威人》，出自于达·芬奇之手，画名是根据古罗马杰出的建筑家维特鲁威（Vitruvii）的名字取的，该建筑家在他的著作《建筑十书》中曾盛赞人体比例和黄金分割。“维特鲁威人”也是达·芬奇以比例最精准的男性为蓝本，这种“完美比例”也即是数学上所谓的“黄金分割”。达·芬奇自己阐述：人体中自然的中心点是肚脐。因为如果人把手脚张开，作仰卧姿势，然后以他的肚脐为中心用圆规画出一个圆，那么他的手指和脚趾就会与圆周接触。不仅可以在人体中这样画出圆形，而且可以在人体中画出方形。即如果由脚底量到头顶，并把这一量度移到张开的两手， ...继续阅读 (10)

我相信很多设计师，无论科班出身，还是非科班出身，当你第一次有想好好学习绘画的冲动的时候，一定是因为看见了一些绘画大师的神一般的创作过程，或是沉醉于自己喜欢的一些绘画作品.比如设计师Atelier Sento的作品：Ben Johnston的粉笔绘画作品：再比如Alexander Vasilevich Maskaev的绘画作品：看到这，是否又勾起了你的画画冲动？你兴致勃勃的买了画本画笔，然而你看着你笔下那堆乱糟糟的线，是不是深感自己手残，觉得自己并不适合画画。并且你发现其实也有好多设计师并不会手绘,却依然可以很好地完成设计工作.于是你心安理得的将画本画笔抛在了角落.然而你不知道的是那些不会手绘却依然很牛的设计师,往往通过别的方式来弥补了缺失手绘这项技能的遗憾,比如他们有很强的脑洞和记忆力,能将脑海中抽象的画面完美的将其在计算机上表现出来,难度有多大,过程有多么艰辛,大家可以自行想象. 【比起计算机制图,手绘对于设计师来说有很多无法比拟的好处】观察入微设计师必须是善于观察，甚至是善于洞察的人．画画可以让你更加专注，对于周围事物观察的更加细致，可以帮助你变得更加敏锐细腻，善于思考，这对于设计师来说无疑价值巨大．创意的来源如果你有一定的绘画功底，它会使你的设计工作有更多的灵感，在你看完一部电影，读完一本书，抑或是旅行的过程中，你的脑海中也许会闪现一些灵感或想法，通过绘画形式将它们 ...继续阅读 (13)

iOS 10人机界面设计指南中文版也来了！今天第二部分是交互部分，包括16个小节，从最新的3D Touch到身份验证、加载、导航等等细节都有细致入微的教学，感谢译者@喵大神经，一起来学习。关联：《UI设计师必读的IOS 10人机界面设计指南 （一）》专题：《iOS人机界面指南》英文好的同学可以直接到这学习：https://developer.apple.com2. 交互（Interaction）2.1 3D 触摸（3D Touch）2.1.1 主屏幕交互（Home Screen Interaction）2.1.2 轻压（Peek）和重压（Pop）2.1.3 Live Photos2.2 辅助功能（Accessibility）2.3 音频（Audio）2.4 身份验证（Authentication）2.5 数据输入（Data Entry）2.6 反馈（Feedback）2.7 文件处理（File Handling）2.8 启动初体验（First Launch Experience）2.9 手势（Gestures）2.10 加载（Loading）2.11 模态（Modality）2.12 导航（Navigation）2.13 请求许可（Requesting Permission）2.14 设置（Settings）2.15 用辞（Terminology）2.16 撤销和重做（Undo a ...继续阅读 (11)

作为设计师，无论如何做设计，都要被束缚在有限的尺寸之内，平面设计用厘米毫米，互联网设计师用像素，分辨率等等来力求在有限的空间内设计出满意的作品。即便像“像素”这么高频出现的词汇，也依然有很多设计师不明白它真正的由来和使用考虑的因素。今天的原创转译文章就和大家介绍一下像素的前世今生。像素密度是指一个指物理空间（通常是英寸）有多少个像素。第一台Mac，每英寸有72个像素，这可能听起来很多，但实际上它要求的图形清晰度需要这些庞大像素的支持。自那时以来，屏幕技术有了极大的发展，连现在最基础的电脑屏幕每英寸的像素（“PPI”）范围都介于115到160了。但是，当苹果推出带有视网膜显示屏的iPhone手机——一个每英寸增加了一倍像素的超级清晰屏幕。结果就是图形比我们之前见过的所有图形都要清晰。为了保持用户界面相同的物理尺寸，像素尺寸进行了加倍，比如一个高度为44像素的按钮现在变为88像素。为了适应不同的设备，设计师需要在原有“1倍”图形的尺寸下同时提供新的“2倍”尺寸图形（如图标）。但有一个新问题，你不能再说：“嘿，这个按钮应该是44像素高”，因为在不同设备上它也有可能是88像素高。也有与像素密度无关的单位——“点”或简称“PT”。 1点等于视网膜显示器诞生前显示器的1个像素，等于2倍的视网膜显示器上的2个像素。它们允许设计师说：“哎，这个按钮应该是44点高”，然后在任何设备可以直接乘上其自身 ...继续阅读 (13)

字体的分类有很多罗马字体或衬线体（roman，serif）；无衬线体（sanserif）；手写体（script）；雕刻字系（glayphic）；典籍体字系（Classical）；装饰体字系（decorative）； 展示体字系（Display）；当代字体字系（Contemporary）；符号字系（Symbol） …今天我们主要讨论的是衬线体与无衬线体的一些明星字体。衬线体：笔画末端付加油爪状或者线条叫衬线，据说衬线有助于水平方向的视线移动，所以小说等正文排版中会更多的使用传统造型的罗马字体。文艺复兴时期到巴洛克时期的老罗马体，18世纪后具有直线型衬线的现代罗马体。 Centaur具有史诗般正统风格，特别适合用于表现年代悠久。具体排版时注意合字和老式数字的使用。威尼斯的圣马可大教堂的指示牌就是用的这款字体，营造出优雅的氛围。指环王的海报运用的就是这款字体，以其烘托其史诗感的氛围。 Garamond诗歌般感觉的传统、柔软、纤细的字体，没有强烈个性，十分易于阅读，老式罗马字体的代表性字体 Caslon美国独立宣言用字，是活字时代的大热字体。活字时代有一个说法：在犹豫不决的时候就用卡斯隆。说明其应用的广泛 Baskerville过渡期罗马体（旧体到现代体）的代表性字体，非常经典，给人古典、高贵的感觉。 Didot现代衬线体，发丝衬线。特点是 ...继续阅读 (15)

iOS 10人机界面设计指南中文版也来了！今天是第一部分概览，包括有3个小节，主要介绍了iOS 系统的3大原则、iOS 10 的新特性和iOS界面的基本元素，感谢译者@喵大神经，一起来学习。相关专题：《iOS人机界面指南》英文好的同学可以直接到这学习：https://developer.apple.com1.1 设计原则（Design Principles）作为一名移动应用设计师，意味你有机会发布一款具有杀伤力的产品能够登上苹果商店的榜首。为了实现这个目标，你的产品必须在质量和功能上达到高标准。以下三大原则让iOS系统有别于其它平台：清晰（Clarity）：纵观整个系统，任何尺寸的文字都清晰易读，图标精确易懂，恰当且微妙的修饰，聚焦于功能，一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。遵从（Deference）：流畅的动效和清爽美观的界面有助于用户理解内容并与之交互，而不会干扰用户。当前内容占据整屏时，半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化，从而突出内容。深度（Depth）：清楚的视觉层和生动的动效表达了层次结构，赋予了活力，并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感，让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时，流畅的过 ...继续阅读 (20)

什么是Google Daydream在前不久刚刚结束的I/O 2016大会上，Google推出了“Daydream” – 这是一套基于Android的开源平台体系，用以构建高质量的移动VR应用及相关服务。该平台将支持Google Play当中的VR app，以及来自YouTube的VR视频内容。透过Daydream，我们不难看出Google意图统治未来VR市场的雄心。Daydream的头显与控制器Google不仅将在VR app与内容市场当中发力，同时也会为Daydream平台打造官方的VR头显与控制设备。不过对于Google来说，制造硬件设备的根本目标并非售卖，而是为广大的第三方制造商与开发者提供一套完整的参考标准，并在显示分辨率、头部追踪能力及延迟等方面对第三方Daydream-ready设备进行认证。而Daydream带来的运动控制器则使在基于移动设备的VR平台上打造高品质游戏体验成为了可能 – 操作方式与Wii的控制器类似，用户可以手持着进行上下、左右、前后方向的自由运动。这款运动控制器也使Daydream VR平台在面对其对手 – 三星Gear VR的时候能够展示出独特而强大的竞争力。基于移动设备的VR平台前景如何答案是显而易见的。时至2016年，全世界已有超过20亿的智能手机用户，其数量是PC用户的两倍。根据Statista Inc. ...继续阅读 (7)

如果一幅图所表达的内容就可以胜过数千文字的叙述，那么一张界面又有多少内容可以让我们探讨呢？事实证明，这里有许多不同的主题值得我们去讨论，其中一个主题就是色彩理论，它包含挑选一个匹配颜色色系的基本技巧。当你在设计网站时，采用的颜色会传达出截然不同的思想和情感，所以为你的品牌选择合适的颜色非常的重要。例如，如果你给美国的顶级沙滩设计网站，和你创造一个像Groppon一样的在线商城，你肯定希望用不同的配色设计它们，因为它们传达的是不同的信息——一个网站传达的是让人心情放松，而另一网站传达的是由于做了一次非常棒的交易而让心跳加速兴奋。本指南探讨的主题是关于网站和平面设计的色彩。学习先进的色彩理论最好的方法，是通过实践，而不是理论。但是为了提高，你必须有一个起点。除了有用的配色技巧和观点，你还可以发现许多宝贵的资源散落在整片文章中。颜色的目的从艺术的角度来探索色彩，它可以使主题更加鲜明。这就是一张绘图和一幅绘画主要的区别，尽管它们能传达相似的信息。这个道理适用于任何设计包括网页设计。将色彩添加到设计中使画面的表达更加丰富。图形、字体、按钮和超链接，一切都可以在某种程度上匹配总体的基调。例如，葡萄园网站的颜色和水族馆网站的颜色是不同的。为什么呢？因为这是两种完全不同类型的网站，它们试图传达不同意义、目的或者感情给自己的目标受众。因此，当在考虑颜色时，记住，颜色很少用来做页面的结构的区分和搭建。 ...继续阅读 (20)

大家好，这个系列打算开始和大家讨论一下SVG。关于SVG大家应该都有过了解吧？什么，你不知道什么是SVG？可缩放矢量图形（Scalable Vector Graphics，SVG)，是一种用来描述二维矢量图形的XML 标记语言。 简单地说，SVG面向图形，XHTML面向文本。SVG与Flash类似，都是用于二维矢量图形，二者的区别在于，SVG是一个W3C标准，基于XML，是开放的，而Flash是封闭的基于二进制格式的。因为都是W3C标准，SVG与其他的W3C标准，比如CSS, DOM和SMIL等能够协同工作。既然要讲SVG，那从哪里开始呢？就从PSD开始吧。1.如何从PS中导出SVG啊？从这么基础的开始？要玩SVG，首先需要先有SVG文件。大部分情况下，我们拿到的PSD是这样子的：而SVG长这样的：这就是传说中上天入地无所不能的SVG吗？！！！！那些跟虫子一样的数字是要一个字一个字写上去吗？？？？要是出错了，还要一个个字符比对过去吗？？？？老师没教过SVG这么恐怖啊SVG实际应用不多，是有道理的！好，本文到此结束，大家散了吧下面开始讲如何将从PS中导出SVG。首先，SVG当然不用一个字一个字的去填那些虫子一样的数字了啊！真要那样，SVG没写完，人先疯了。但是我们这样的PSD要怎么转换成SVG？。。。先看下我们需要的部分看这边，我们要的是这个彩色带子，不是人物剪影哈看这边，我们要的是 ...继续阅读 (16)

任何一个行业的从事者，在入行时间久了之后，就难免会有“职业病”，你会用行业的眼光去分析生活中的问题，就如同今天，同事中，好多联通号的手机都没信号，打不出电话，更接不到电话，搞程序的同事说，可能联通的数据库被黑了。我们用产品经理的眼光去分析一下，什么样的体验是糟糕的用户体验。一、不怕不识货，就怕货比货你肯定有过这样的经历，一个人去餐馆点餐，吃到一半的时候，还没吃完，就有服务员来收拾你的餐桌，把不用的餐具或者用过的纸巾收拾好，可能这是餐馆的规定，一方面是想让用餐者有更好的环境，另一方面是希望用餐者吃完就尽快走，提高翻台率。然而，带给用餐者最直观的感受就是，舒适的吃饭过程被打断了，破坏了心境，可能只剩最后一个包子没吃，也就不吃了，可能下次也就不来了。生活中，这就是糟糕的用户体验，而这种体验在同行业或者说竞品的对比下就会更明显。以两类不同的App应用为例上图中，从左至右，分别是智联招聘、猎聘、大街网，三个求职App的首页界面。先从左边最基本的功能，简历管理说起。一个求职者，对于简历的维护与关切自然不用说，就像女生出门要化个妆一样，非常重要！从智联招聘（左1）的App页面可以看到，最直观的简历管理入口，包括预览简历，刷新简历。同样中间猎聘的简历管理入口同样明显，只不过猎聘网的刷新简历要在进入我的简历之后第二步。而（右1）大街网，我们则找不到简历管理的入口，在一番摸索之下，找到了刷新简历的路径 ...继续阅读 (8)

这几年的工作经历中，我接触过许多的工具实验。常常听到激情满满的用户体验设计师为自己支持或反对的设计工具而争论。Axure, Balsamiq, Invision, Photoshop等等，你能说出名字的工具，我们都试过了。往往得出的结论是：这些工具要么过于强劲，要么过于简单，速度太慢，要么就是Bug太多。没有一个令人满意。我不会偏心地去写原型和线框工具的比较。大家都知道Axure，Balsamiq，UXpin，已经有好多高手写过这方面的文章，所以，我就不再赘述。所以，我想写的坦白一点。这么多工具，让我又爱又恨。演示过这么多工具之后，我陷入了选择的泥沼。试过所有的工具，你会发现这是一种强迫症，是种病，也可能是某种恐惧症。我领悟到，不管是哪种工具，我显然都不会满意的。所以，我一直在尝试新的工具，一直尝试，一直尝试……Mockplus的出现，让我眼前一亮，无意中看到它的demo。那Mockplus怎么样呢？接着往下看吧。Mockplus非常的敏捷，在我发现它的同时，我就已经开始研究它的功能点。有一段话是这么描述它的：如果你正在寻找一款简单易用，又实惠的原型设计工具，个人认为Mockplus是很理想的选择，不像Axure、Justinmind那样繁复，也比Balsamiq功能强大。虽然Mockplus在快速原型领域还是新人，但也是个不错的选择。所以，Mockplus是可靠的。但我想补充一点 ...继续阅读 (19)

7月1日，《非银行支付机构网络支付业务管理办法》（以下简称《办法》）将正式生效，这被称为“史上最严厉支付使命认证规则”。根据 《办法》要求，支付机构将对客户实行实名制管理，届时未进行实名登记，支付宝、微信账户将受限。《办法》是如何规定的？《办法》要求，支付账户将严格实行实名管理，并按照三类支付账户分级管理。如果用户身份验证情况未达到《办法》所规定标准，会影响支付账户部分功能使用。①开设Ⅰ类账户可以采用非面对面方式，通过至少一个外部渠道验证身份，比如居民身份证信息，这类账户付款限额是自账户开立起累计1000元；②开设Ⅱ类账户需要面对面验证身份，或以非面对面方式通过至少三个外部渠道验证身份，账户付款限额为每年累计10万元；③最严格的是开设Ⅲ类账户，它需要面对面验证身份，或者以非面对面方式通过至少五个外部渠道验证身份，付款限额是每年累计20万元。给消费者带来的影响是什么？微信用户不实名 支付功能将受限据微信客服介绍，如果用户不实名，微信支付功能可能受到限制，也就是说，通过微信收钱、使用零钱发红包等功能可能会受到限制。受限制的用户可以通过实名认证获取更高权限，也可以通过微信绑定银行卡完成支付。据悉，之前在微信支付添加过银行卡的用户都是实名用户，即使之后解绑，也已经完成实名，无需再绑卡。支付宝用户不实名 将无法收款支付宝方面表示，不实名认证的账户将无法收款。根据央行规定，如果单笔收付款超过1 ...继续阅读 (14)

每天有成百上千的应用被提交到App Store ，如何才能从这么多应用中脱颖而出呢？这一直是开发者们绞尽脑汁思考的问题。其实，苹果公司给我们提供了一种便捷的方式——登上App Store的精品推荐页。如果把App Store比作技术世界的购物中心，那首页的精品推荐位置就相当于商场入口处的巨型广告位了，对顾客的吸引力不言而喻。那怎么做才能获得那些梦寐以求的显眼位置呢？接下来，就和大家分享一些方法。1、了解精品推荐的挑选方式《孙子兵法》曰：知彼知己，方能百战不殆。所以，在努力获得首页位置之前，我们应该先了解那些被推荐的应用是如何被挑选出来的。关于如何挑选这件事，App Store前市场经理Michael Ehrenberg曾在美国手游大会这样解释：为了更好地服务于不同的国家和地区，苹果在全球设立了约150个应用商店，每个应用商店都拥有当地的编辑团队。当地应用商店的编辑们每周都会为他们的特定用户锁定最好且最有意义的应用。通过这种人工挑选应用的方式，苹果公司确保了一件非常重要的事情——那些即将被给予特殊待遇的应用最有可能吸引本地用户。所以，当你制定策略希望获得推荐时，请记住：被推荐的应用不是由复杂算法选出来的，而是由当地的编辑们人工挑选的。不管你家应用有多酷，要想上首页得先让编辑团队认可。2、贴近苹果的设计风格苹果受欢迎的原因有很多，而其中的一个重要原因无疑是它的设计。苹果的设计风格一直推 ...继续阅读 (8)

又是一篇来自Tubik Studio 的文章，丰富的设计项目经验使得这家资深设计机构对于设计的每一个细节都有着独特而系统的见解。今天的文章聊的就是深色系背景在设计中的运用，这当中有什么门道呢？看下去~黑暗系背景，或者说深色的背景，在UI设计中的运用至今都是一个相当有争议的议题。背景选取对于界面的使用效率而言是至关重要的，合理的背景设计让界面更易用，相反，一个不恰当的背景则可能毁掉你精心设计的UI。今天我们一起来探讨一下深色背景在UI设计中的使用技巧和注意事项。影响配色方案和背景色选取的因素有很多，深色的背景在网页和APP UI界面中运用时，优点和缺点一样明显。Tubik Studio 的诸多设计项目的实际经验证明，深色背景本身的确可以带来良好的用户体验，提供极具吸引力的解决方案。所以，我们探讨一下如何在UI设计中最大程度地运用深色系背景。深色系视觉感知早在2009年的时候，ProBlogger 就曾做过相应的调研，当问及用户他们喜欢什么样的博客背景之时，几乎有一半的用户反馈喜欢浅色的背景——这很合理，毕竟博客是以文本内容为主，浅色的背景更符合大家的日常阅读习惯。不过有意思的地方在于，大概10%的用户反馈会更喜欢暗色背景，大概三分之一的用户则认为背景的色彩与网站本身的属性以及内容相关。同时，这也意味着有相当大一部分用户需求在设计师设计过程中被忽略掉了。然而，对于非文字驱动类的网站和A ...继续阅读 (16)

现在VR行业可谓非常之火爆，我每天早上在36氪上都能看到新的VR产品资讯，诸如VR游戏、VR购物、VR看房、VR直播等等，VR产品大有延伸到我们生活里各方面各领域中去的趋势。而作为设计师的我们，VR产品的内容及交互设计肯定是我们需要了解的，所以应该赶在这股潮流普及大众消费者之前先了解清楚VR行业信息，并掌握VR设计的方法及原则，从而站在互联网行业乃至整个社会发展的前沿不被时代所淘汰。最近我通过查阅国内外各大资讯网站，并入手体验了一下VR眼镜的产品（IOS和安卓应用），整理出了这篇关于VR行业信息的文章，在此分享给大家供参考。1.VR的概念和发展1.1VR的概念虚拟现实（Virtual Reality），就是利用电脑模拟产生一个三维空间的虚拟世界，提供用户关于视觉等感官的模拟，让用户如同身临其境一般，可以及时、没有限制地观察三维空间内的物体。当用户进行位置移动时，电脑可以立即进行复杂的运算，将精确的三维世界视频传回产生临场感。 现在的大部分VR技术都是视觉体验，一般是通过电脑屏幕、特殊显示设备或立体显示设备获得的。在一些高级的触觉系统中还包含了触觉信息，也叫作力反馈。 VR具有三个基本特征：immersion-interaction-imagination（沉浸—交互—构想），它强调虚拟系统中人的主导作用。下表是过去和现在的计算机应用系统在这三个特征方面的对比：& ...继续阅读 (9)

基于移动设备的UX设计有很多难点，其中最大的设计挑战之一是在有限的屏幕空间上解决点击输入的问题。对于UX设计师、开发人员和产品经理来说，让这个过程变得易于用户使用就显得至关重要。本篇文章阐述了提高数据输入体验中的三个关键因素——速度（提高输入速度）、引导（为用户输入提供引导帮助），反馈（直接有效地指出用户输入过程中的问题）。输入根据不同的输入信息匹配合适的键盘用户都偏爱那些根据输入内容提供了合适键盘的应用。我们可以根据输入框的类型优化虚拟键盘，这是实体键盘不能做到的。常见输入内容的类型包括：•  数字：电话号码、信用卡号码，PIN码•  文字：正确的名字、用户名•  混合输入：电子邮件地址、街道地址、搜索关键词请确保这种匹配键盘的设计在整个应用中是统一的，而不是仅仅用在了某些地方。图1左，用户需要点击123键来切换键盘类型以便使用数字键盘图1右，我们应该为需要输入数字的文本区域自动匹配合适的数字键盘合理使用自动大写功能合理使用自动大写对于提高移动端表单的可用性来说至关重要。每个文本输入框的首字母和及每句话的首字母应该自动大写。这尤其适用于以下两类输入区域：•  给某信息命名，比如用户的姓和名。•  包含句子式的信息，比如短信息文本。不过，当我们输入电子邮件地址时，应该禁用自动大写功能，当用户发现邮箱首字母大写时，常常会退回去将大写字母删掉，因为他们担心这样会让邮件发送产生问题。当词 ...继续阅读 (8)

对于设计师而言，想要高效地搞定工作，似乎是一场旷日持久的战争。不论你是供职于设计团队，还是一名自由设计师，始终被客户和需求追逐着，狼奔豕突。日复一日的忙碌会让你开始追求成为一名效率拔群的设计师。当然，你可以做到。让你工作低效的陷阱其实都是可以预先规避的，合理利用手头的工具，灵活的调整现有的工作方式和流程，你的效率可以得到一个质的提升。习惯各类软件快捷键从里到外熟悉你日常使用的每一个软件，至少你也得清楚它最常用的部分（PS这种软件即使是基础功能都已经很多了），学习它们做好的方法就是每天都使用。想明白如何将点点滴滴的闲暇时间都利用上，在一遍又一遍的练习和尝试中了解功能，将你最常用、最需要的样式反复练习，在此过程中熟悉各种相关快捷键，最终提升你的工作效率。同时，经常关注行业网站，了解软件有哪些更新，看看常见的教程里大家都是怎样完成设计的。通过网络了解软件新特性，以及如何更加便捷地用新特性完成设计。优设的PS和AI教程更新就相当频繁，如果你想看看国外设计师都是如何完成设计的，Tuts+是个不错的网站。不再分心几乎所有的设计师每天都会因为各种各样的事情而分心，即使是上 Dribbble 和Behance 这样的网站获取灵感，都难免忘记最初目的，一逛好几个小时。微博，QQ群，微信聊天，社交网站，甚至发呆，各种各样的时间杀手会将你从工作状态中拉走。对抗分心应当从两个方面着手：1、创建专门的工作区 ...继续阅读 (15)

目标视频内的搜索，要打造一个更便捷、更智慧、更精准的，集语音和文字于一体的搜索功能，并结合用户收藏、分享的喜好，通过大数据精确分析匹配，为用户智能化推荐最感兴趣的视频内容。用户反馈1.通过用户研究团队的问卷调查和走访，用户对于搜索的创新视觉设计并不完全理解：2.搜索的入口不好找，很难第一时间找到搜索这个功能；3.首次进入之后没有任何提示直接进入语音录音，键盘切换费时费力；4.没有热词搜索提示，以及热门搜索推荐；5.没有关键词联想，返回按钮不好找等。设计思考按照用户对搜索的使用过程，我们可以将用户的搜索行为分为搜索前、搜索中、搜索后三个阶段，从目前的搜索设计来看，为了提升用户的体验，我们将在每个阶段，根据不同目标进行设计。线上通常的搜索界面如下图：通过用户的反馈，结合目前其他家的搜索设计，我做了如下总结：1、搜索配色与APP整体风格存在较大反差，页面过渡不平滑，容易使产生压抑感；通过浏览各种网站，以及上图的举例，我们会发现使用黑色背景的界面要比使用白色背景的界面视觉效果更强烈。如果界面背景是白色，对于界面来说可以选择的配色方案更丰富，同时突现的也不仅是白色；而使用黑色背景则会使较大面积的黑色更突显。如果背景使用黑色，色彩的搭配会更复杂，尤其是在我们的产品中，主色是红，黑红的搭配，营造出一种略显紧张的氛围，会使用户产生压抑感。因此我们选择白色作为APP搜索页面的背景，让视觉体验更舒适， ...继续阅读 (9)

微信作为国民级应用，对应的分析、讨论文章数不胜数。但是之前的文章都是分析发展轨迹、成功路径或者产品设计的，很少有人从产品的不足进行分析。这篇文章作者@产品小白 从自身角度出发，历数微信的6个不足，希望能给各位带来不一样的解读。“一千个人眼里有一千个哈姆雷特”这句话用在微信上我觉得一点也不为过，微信作为一款伟大的产品，让人有一种“一千个人眼里有一千种用户体验”的感受。微信的伟大毋庸置疑，从最初的社交软件慢慢演变为一种生活方式，但是今天我们不谈微信多么伟大，谈谈它那些渣渣细节。1.阅读公众号体验差从信息获取的角度分析主动获取信息：小王通过微信搜索关键词，找相关的文章，发现有一篇文章写的不错，就想关注，但是立刻跳出关注界面，之前看的文章找不到，只能凭记忆再搜索一遍。间接获取信息：小王看到朋友圈有人分享一篇文章，点进去之后发现这篇文章写的也挺有意思的，也想先关注，也是马上跳到关注界面，小王之前刚看的文章没有了，又要回朋友圈找之前浏览的文章。不管是主动获取信息还是间接获取信息，两种途径用户体验都不佳，建议在关注的时候，提醒用户已关注，不用立刻跳到关注界面，不然打断了用户正在阅读的文章，片碎化的阅读是用户最反感的。2.收藏文章不能置顶，置顶公号体验差针对公众号运营者或爱学习的用户而言，收藏的文章（案例）非常多，但是没有及时查看，慢慢累积起来，收藏的文章已经非常之多了，缺少置顶的功能。谈到公众号 ...继续阅读 (12)

当我们看的PS教程越来越多、掌握的PS技巧越来越多的时候，可能就反思最初看到的教程到底是不是正确的。而今天国外精品翻译教程就跟大家一起来看看Photoshop高手分享的10个Photoshop心得，妥妥的干货！图001.在背景图层上直接编辑由于PS初学者总会犯些小错误，所以大多数的Photoshop教程都会要求创建副本，然后在副本上进行操作，即使出错都可以迅速回到原点，再次进行操作。不过，如果你已经意识到自己的每一步操作都能令作品更加完美，那就没有需要再回到原点了。选择“图层>新图层>复制创建新图层”，或者使用快捷键Ctrl+J，就可以很简单地创建副本。但是过多的图层会让图层管理变得困难，特别是要从众多图层中找出目标对象的时候，很费时间。因此，如果有人说创建副本或者弄多几个图层时，其实你需要想想再进行操作。如果只是对单一背景图层进行操作，就可以完全不管图层面板，以及担心创建副本影响PS运行速度的事情。当然，这听起来很简单，但要改变长期形成的操作习惯以及知道什么时候需要创建副本却不是那么容易的。所以操作前，先想想接下来的动作，尽量避免无用功。图012.用好橡皮擦工具橡皮擦与图层蒙版的功能比较类似，通过“擦掉”和“遮蔽”，就能将不想要的像素不显示出来。而图层蒙版的优点在于通过改变蒙版颜色的不透明度，达到不同程度的遮蔽效果。所以在大多数情况下都比较建议选用图层蒙版，因为蒙版下 ...继续阅读 (7)

用错色彩是常见的现象，有没有特定的色彩搭配是网页设计中的大忌呢？有！而且还不少。这些色彩组合会让你的网页出现各种各样的问题，为配色制定一个黑名单势在必行。当我们讨论配色的时候，通常聊的是配色趋势、配色规则和配色方法，但是与此同时，我也应当合理的规避一些比较典型的错误配色方式。这个配色黑名单并不长，但是覆盖了多属的配色问题，不妨仔细看看~网络是一个多彩的世界，而色彩也是网络吸引用户注意力的主要手段之一，它令人产生兴趣，给人带来影响，并且通过对比、衬托带来愉悦的浏览体验。与此同时，色彩还是设计趋势中无法忽略的一个重要组成部分，无论是扁平化设计还是Material Design，色彩的运用都是重中之重。但是，用错色彩也是常见的现象。有没有特定的色彩搭配是网页设计中的大忌？有！这个一定是有的，并且还不少。这些色彩组合会让你的网页出现各种各样的问题，为配色制定一个黑名单势在必行。今天的文章，我们就来聊聊配色的“黑名单”吧。太亮的霓虹色闪亮的霓虹色看起来很有趣，似乎能让页面显得非常潮、非常流行。但是他们并不会让眼睛觉得舒服，往往会给人以“闪瞎了”的不适感觉。霓虹色的主要问题在于使用这种色彩的文字内容难于阅读，不好识别，和暗色调的背景搭配的时候，这种晃眼的感觉尤其明显。而如果用霓虹色作为背景的话，这个页面几乎是没法看的，除了霓虹色之外的内容几乎都没法看清楚。想解决这个问题，你可以试着降低霓虹色的 ...继续阅读 (12)

大千世界，人生百态，如何才能了解这么多的用户？相对于运营、编辑通常选择与自己兴趣爱好相关的领域，产品经理更多是“做一行、爱一行”。对于自己感兴趣的领域，产品经理本身可能就是典型用户，自然对用户需求更了解一些。但如果遇到了自己不太感冒的领域，产品经理应该如何去理解用户、理解需求呢？概括来讲，仍是“汝果欲学诗，功夫在诗外”。理解用户、理解心理和人性都是日积月累的工夫，书上只能教人经验与方法，真正要让自己懂用户，还是需要靠平日里的实践与总结。一个产品需做个三年左右，产品经理对于用户和产品才能有深刻的感悟与经验。十年时间，也就做三个产品，想要单凭三个产品的经验，去理解各种不同用户的特质，基本是不可能的。也就是说，这门工夫纯靠工作时间是练不成，其实它是与个人的生活体验息息相关，也许每一天都在观察和思考，那么十年时间就能滴水石穿。为此我总结了一些我的经验：一、培养同理心人都是自我的，本能的从自我出发。但单单一个自我，没有办法去体察到那么广泛的人和事，自然也就无法深入理解用户们的需求。同理心其实是情商的一种，往往很难做到，尤其是产品经理。因为产品经理本身有很强的自我意识（否则怎么有那么多的想法去推动改变），在工作过程中自我防御和自我辩护的心态比较强，这与同理心是矛盾的。培养同理心，要从倾听自己的心灵和感觉开始。如果不能觉察到自己的内心真正的想法，又如何能去体会对你来说一片空白的他人的领域？倾听自 ...继续阅读 (10)