您可能听说过：好的设计是显而易见的而优秀的设计是无形的。同样的原理也适合于开发移动APP的动效：一个优秀的动效使您的APP便于使用并且抓人眼球，同时在用户使用APP时完全不会被动效分心。任何动效的主要任务都是向用户阐释APP的逻辑。在此我希望分享一下我们在设计美观并实用的动效时的一些经验。 动效的种类：为了充分利用动效，你必须了解动效在App中的定位和职责，我们一起看一些动效的种类吧。1. 视觉反馈对于任何用户界面来讲，视觉反馈都是至关重要的。在物理世界中，我们跟物品的相互作用是伴随着视觉反馈的。同样地，人们期待从APP元素中得到一个类似的效果。App给的视觉，听觉及触觉反馈，使用户感到他们在操控APP。同时视觉反馈有个更简单的用途：它暗示着您的APP运行正常。当一个按钮在放大或者一个被滑动图像在朝着正确方向移动，那么很明显，这个APP在运行着呢，在回应着用户的操作。下面的例子显示，当用户点击屏幕以示完成任务时，包含有数据的方块就缩小并且变成了绿色。来自：“WORKOUT BOOK” ANIMATION.READ THE CASE STUDY HERE. CHECK OUT THE SHOT ON DRIBBBLE  众所周知的应用：Tinder，往左划动代表喜欢，往右划动代表pass。也被当作了一种视觉反馈的动效类型。我们已经将这种动效实施于Kolo ...继续阅读 (3)

大宝–dabao：我觉得做设计到三十岁的时候，是个坎儿，也是个分水岭。大学刚毕业的时候，入行的是广告公司，在圈子里也算是有名气的几个4A公司里混过。当年的广告圈4A都是自带光环的，刚毕业就能混进去做设计的孩子总归还是不太多，所以那会儿呆在公司里我总是年纪最小的那个。那时我二十出头，担当项目主力的是大多是二十七八岁82、83年的资深美指们。总监大都70末，30出头。那时候天真的以为工作个5、6年，差不多就能熬成资深设计师，熬到30岁了也能熬成总监做做。今年我刚好是当年所期待应该熬到总监做做的年龄：30岁。我没能成为总监，依然在一线做着设计，相比刚工作那几年，增长的是对项目的推动力、把控力、执行力和对设计的表达能力。再回头看看现在的广告公司、设计公司或是一线互联网公司，主流的总监们的年龄大多也还是集中在70末80初这个年龄。肯定有人说某某27、28就当上了某某公司总监，某某公司总监有40+，这些算不上普遍规律，也或许是我眼界狭隘，接触的圈子里大多都是我所说的这个范围里吧。也有人说为什么那些70后的总监们30出头就做上了总监，而那些85年左右刚好30出头的时候却坐不上总监？今天不太想说什么年龄适合做总监或是容易当总监。如果你了解一点国内设计发展的黄金阶段和互联网的发展阶段，应该大致会判断出原因为何。为何85年左右到了30岁为何做到总监的却很少？因为上一代总监在这个时候刚好经历 ...继续阅读 (4)

UX设计师该看哪些书？Mockplus 为你推荐以下的书籍，如果认真读完，并且读懂了，相信你可以进阶了。（Mockplus 挑书小技巧：看看这本书的再版次数，再版次数越多，这本书一定越好）Mockplus推荐之：《如何设计好网站》Don’t Make Me Think作者：Steve Krug一本 UI 设计入门级读物，也是“可用性”类主题被推荐得最多的书。贯彻本书的核心思想是“别让我思考！”作者 Steve Krug 围绕可用性定律总结了直觉式导航和设计原则，并例举了很多反面例子。本书语言轻松，配有大量插画和信息图解，读起来趣味横生，让原本枯燥的设计原理变得浅显易懂。Mockplus推荐之：《设计心理学》The Design of Everyday Things作者：Don Norman这是一本被奉为经典的设计师必读书目，也是一本适合初学者的入门读物，即使你没有设计教育背景。它将为你打开一扇新世界的大门，教你如何以一种全新的设计的视角来观察周遭的世界。读完这本书，你将会发现设计无处不在，无论好坏。虽然是一本 20 多年前的书，但其核心思想直到现在仍不过时，一本经历了时间验证过的书，值得一读再读。Mockplus推荐之：《交互设计之路》The Inmates Are Running the Asylum作者：Alan Cooper虽然是10多年前的书籍，但很棒。特别适合程序员出身的 ...继续阅读 (4)

今天给大家带来一份“干货”，作为一名UI设计师，我们来了解一下一款APP从项目启动到切图输出的全过程，大家可以把这个相当于企业工作流程吧，但由于各公司之间存在一些差异，但终究还是有想相通之处，希望对大家能得到一些启发。另外想说的就是，这里讲的是一种工作方法，并不是工作规范，因为技术的更新是非常快的，可能这里介绍的一些方法，跟你们的程序员搭档并不完全一样，所以大家在具体工作中还是需要融会贯通灵活运用的。以IOS系统为例，我们从头到尾来过一遍。一、项目立项首先公司会将跟此项目所以的相关人员召集起来，产品经理会把产品详细地用原型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，逻辑跳转演示一下；之后会评估项目用时，各部门协调，项目启动。对于作为设计这一块的GUI设计师来说，接到原型后，我们就要根据里面的原型需求，进行视觉稿的设计输出，最终，我们应该最少会输出这么几样东西：另外这里要提一点的就是，大家在做设计的时候一样要养成良好习惯，比如要及时地对文件和文件夹进行归类，不要说这个是处女座的情节，这个应该是所以设计师都应该具备的基本习惯，否则当页面过多的时候，就算你自己能找到，当你给到其他搭档时，那别人就要吐血了。界面设计至于做界面设计的软件，目前行业里用的最多的就是PS和AI了（高版本优于低版本，低版本很多功能没有的）。两者切换使用，双剑合壁，效果更加哈~标注工具做好 ...继续阅读 (2)

今天来聊一下情感化的UI设计。在用户和UI之间建立情感联系是构建用户信任和依赖关系的关键因素，而实际上要做的事情比听起来麻烦得多，因为需要考虑的因素更多。情绪是广泛的、复杂的，它容易受到影响，但是也很难改变。而这也是我们今天要思考的事情，什么是情感化的UI设计？如何创建一个能够唤起用户情感波动，构建情感纽带的UI界面？这应该就是你的下一个设计项目中应该仔细考虑的事情。情感化UI设计其实，从电子邮件、短信和社交媒体帐号当中，我们可以窥见情感化UI设计的影子。我们日常交流中，每天发出去的那么多表情符号，可以让别人清楚得了解我们的感受，而这就是情感化UI的一种呈现形式。情感化UI 是网页设计领域的新圣杯。它是高度可用的界面和内化情感联系的结合，无论是快乐还是悲伤，是愤怒还是愉悦，当用户同一个设计精妙的情感化UI界面交互的时候，就能第一时刻感受到。让用户从界面中感受到情感和情绪，总好过什么都感受不到的设计。用户在同界面进行连续交互的过程中，逐步的变化可能会牵涉到一系列不同的情感情绪，而这些是你需要考量的。当然，其中最重要的事情在于，真正触发情感的是你的内容与相应的设计，它们也是你所讲述的故事的核心部件。用户所产生的情绪最好不要来源于你的网站或者APP本身——比如不要用户因为糟糕的体验和不可用的模块而感到沮丧。正如你所知，人是一种颇为复杂的生物，用户很少能够清晰地判断自己的感受并准确的表达出 ...继续阅读 (6)

很多同学都问，为什么同样的页面，英文排起来就很好看呢？下面我们从段落结构、字体结构和排版规则3个角度来分析分析，说不定会让你恍然大悟哟。一，段落结构上的差异下面我们将拿出两段普通的中文字体和英文字体来进行对比，中文适用的是方正兰亭纤黑，节选自（结构思考力）：好，我们来对比一下，这两个段文字，除去字体颜色，粗细等因素以外，他们有一些怎样的区别：1. 英文的段落几乎每一个单词的长度都是不一样的，而中文的段落字体都是方方正正的这就导致了中文看起来缺少变化。2. 英文的篇幅普遍比相同意义的汉字的篇幅要多，在设计时，英文本身更容易成为一个设计主体，而且因为英文单词的字母数量不一样，在编排时，对齐左边之后，右边都会产生自然的不规则的错落，这在汉字编排时不太可能出现的，汉字编排每个段是一个完整的”块”，很难产生这种错落感。3. 同样的，在每一个字体上我们也能找出一些差异，英文的字体弧线多，看起来更动感更多变，而中文的比较刚硬显得有些死板。二，字体结构的差异英文每一个字体所占的空间比例都差不多，而中文则是有多有少，一个太过饱满，一个留白太多。这个实际并不是说中文就比英文难看，而是在电子输入时候进行的统一字体规则，否则我们来看下面一张图：三，排版规则的差异 我们能发现中文的标点符号占了一个字符的大小，这样看起来在每个字符的间距相同时，突然出现了一个更大间距的字符，会让人产生突兀感，但是如果 ...继续阅读 (3)

Kana：“为什么一定要用这个颜色？”、“这几个颜色有差别吗？为什么要设定这么多色值啊？”、“这个颜色只是你的个人感觉，每个人的感受都不一样，都因人而异的，我就觉得这个不太合适”…今天这篇总结了设计师在用色前需要思考的几个方向，帮你轻松应对这些问题！欢迎关注点融设计中心DDC微信公众号（微信ID：DR_DDC）在我们（视觉设计师）的日常工作中，是否时常会有这些问题围绕在我们身边？场景常是，问题袭来，我们欲言又止或者很难简单快速解释这些问题，继而要么是简单粗暴的说一个理由或给予许多空荡荡的专业术语，但对方听后，貌似还是不太明白也不认同，最终…好像还是归于原点（深深的无力感与空虚袭来，真想来个葛优躺….）。用色三思1. 根据色彩自身特性决定的我们先理解一下什么是物体本身的性质即颜色。神经学家Beau Lotto在TED“错觉中的视觉真相”中讲述了生命系统对光线产生的颜色这一感应能力的重要性，颜色帮助我们根据物体表面反射的光谱分辨其外观的不同，起到保护的作用。我们看下面这张图，这张图通过表面反射光线的量来看，你看到什么？那我们再根据表面反射光线的性质来看，你看到了吧～这就是物体表面反射光线的性质（即颜色）的重要作用。每一个物体都有属于自己的颜色，而颜色会给人的感觉带来巨大的影响。如下面这个实验：请两个人，让其中一人进入粉红色壁纸、深红色地毯的红色系房间，让另外一人进入蓝色壁纸、蓝色地毯的 ...继续阅读 (1)

绘制图标并不是一件容易的事，需要素材时大部分使用者可能会转向国外网站来进行搜寻灵感，今天介绍连个图标素材站，总收录高达130万个，帮你找到高质量的图标素材。本文要介绍的这款 Icon Ninja 是一个免费图示搜索引擎，共收录高达89万个图示！数量非常可观。用户只要输入搜寻关键词，即可找出所有类似图案，无须注册就能快速下载取得特定大小的图示。比较特别的是 Icon Ninja 将图示格式分为一般位图（PNG）和向量图两种，预设情况应该只会搜寻较多人使用的位图，如有需要，也可以将搜寻 SVG 图标功能开启。向量图一大特色是不会因放大缩小而造成图片失真，因此更适合用在印刷或应用程序、网页开发。此外，Icon Ninja 还能将你选取的所有图示合并为单张 PNG 图，利用 CSS Sprites 处理技巧应用于网站以提高加载速度，开发者无须自行拼凑图片，直接在在线就能完成前置作业。Icon NinjaSTEP 1开启 Icon Ninja 网站后，直接于首页搜寻框输入要查找的关键词，如果要搜寻 SVG 向量图格式的话，记得把右边选项切换到开启。输入后按下确认就会出现相关的搜寻结果。若你没有任何灵感，也可以点选首页左上角「View All Icons」来查看 Icon Ninja 网站收录的所有图示集，上方选单切换「向量图示（Vector Icon）」或「PNG 图示」，用途及使用情境应该 ...继续阅读 (4)

网上诸多有关Axure进度条制作的方法，但是步骤实在是太跳跃，很不容易搞明白。因此，笔者在这里总结一下Axure进度条制作的方法。下面示例在Axure7中操作，但是在Axure8里步骤也是一样的，建议更新至Axure8，因为其具有不少便利的新功能。一、最简陋的进度条：用于说明原理1、新建一个矩形，命名为“进度框”；2、新建一个矩形，让它和之前的矩形大小一样，并重叠，填充黄色，命名为“进度条”；3、对“进度条”右键，选择“转换成动态面板”，命名为“动态条”，设置宽度为1（因不能设置成0）；4、因进度条一般在页面载入时显示，所以选择“动态条”的载入时–设置面板尺寸–勾选“动态条”，按下图顺序设置宽度，点击fx–在弹出的界面添加局部变量–设置函数–确认，最后不要忘记勾选动画为线性，用时可以随意设置，这里设为5000毫秒；LVAR1表示“进度框”这个部件，[[LVAR1.width]]则表示“进度框”的宽度。5、最后点击发布-预览，便可以欣赏你刚刚完成的进度条了。二、为进度条添加数字，更好地显示进度1、进度条做好后，在进度条居中位置添加一个Label，设置文字居中显示，并隐藏，命名为“进度数字”；2、对“进度数字”右键，选择“转换成动态面板”，命名为“动态数字”；3、对“进度数字”做以下操作，载入时–显示–动态数字+进度数字；4、对“进度数字”做下图操作，更多事件–显示–设置文本–进度数字 ...继续阅读 (5)

闪屏已经成为App设计中重要的一环，非常考验设计师的创意和手绘功底，今天这篇案例精选带你认识一下国内8个高人气App 的闪屏设计。首先是国内闪屏设计一直名列前茅的UC 浏览器：这一版的作者是Sisy，她的Lofter 博客：http://sisy-s.lofter.com/这两年论App 闪屏，第一名非UC 浏览器不可。除了上面这一版重阳节的闪屏，别的节日也很出彩，比如刚过去的这版中秋节闪屏：下面一一介绍下UC 各个节日的闪屏设计：跟我回家吧今年的情人节与春节肩并肩。你问我选择回家还是选择陪你过节，我会说，“跟我回家吧”。亲爱的，情人节快乐。有你的每一天，都是情人节。清明节“拆桐花烂漫，乍疏雨、洗清明。”踏青，祭祖，放风筝。地球一小时UC浏览器邀你，地球熄灯一小时。环保，从我做起。熄灯只是小事。但无数这样小事串联起来，也许能让我们摆脱穹顶之下。让我们一起点亮星空。再孩子一次六一儿童节是美好纯真的象征。愿我们永远美好纯真，让我们再孩子一次吧。带妈妈发现世界妈妈总困惑怎么手机上网？妈妈总不了解怎么网购好货？以前是妈妈带我们看这个世界，现在应该让我们带妈妈发现世界了。妈妈，让我手把手告诉你，你可以用这个小小的手机，连接大大的世界。有些话，毕业后才懂一个熟悉的情景，唤起无限回忆。曾经的9月10日，是我们出着板报，对老师说着节日快乐。实际上我们也许并不明白这其中的含义。当我们都离开校园，才渐 ...继续阅读 (6)

@小乖乖老爸：每一位 UI 设计师，都希望自己的作品是与众不同的，表现自己独特的想法和技法。当你看到那些巧妙的设计，会忍不住惊叹，「太赞了，为什么我想不到呢？」。如果只是模仿，或者「照着xxx抄一下就行了」，那我们的工作还有任何意义吗？与众不同所幸薄荷是家鼓励创新的公司，可以给到设计师比较好的氛围，去尝试和探索。我们宁可为了创新而创新，因为，刚需都被巨头们牢牢抓在手里了，你只有与众不同才会有机会，平庸的产品只会平庸的死掉。要做出创新的产品，做出与众不同的设计，有什么方法呢？接下来我们一起来探讨下。一、先来个套路「套路」这个词现在有点贬义了，的确，做人不要有太多套路，但是做事得掌握套路。想想职场上你敬重的前辈们，他们凭什么赢得你的敬重的？不就是因为在你手足无措的时候，他们掌握了一些套路，教你轻松化解了吗？《从0到1》今天跟大家分享的套路，是我在《从0到1》这本书里学到的。在这本书里，彼得•蒂尔提到，每次面试应聘者他都会问一个问题：在什么重要问题上，你与其他人有不同看法？这真是非常棒的问题，你可以用这个问题来问一个企业家、问一个产品经理，也可以用来问一个设计师，而且从他的问答中，你能看出他对这件事的思考。套路相当深啊！要想做的与众不同，首先要想得与众不同。我把这个问题分解成一道填空题，有事实，有洞察，有结论。当你把三个空填好了，就会想得与众不同。填空题举几个例子大家就明白了。滴滴：大家 ...继续阅读 (3)

乍一看许多APP的布局并不复杂，感觉换成自己也能设计出来，但是当你真的开始着手设计这么一个APP的原型的时候，会发现事情并不是那么简单。看着别人已经设计完成的设计可能觉得不难，可是当自己动手的时候，在特定的元素的选取和设计上很容易陷入困局，这个时候才明白它的难点并不在于工作量的多少，设计者常常深陷于细节构建的囹圄，这才是它的困难之处。即使是元素与元素之间的分隔方式，都能随随便便用一整篇文章来进行探讨。传统的分隔方式在UI界面中，最传统也是最常见的分隔方式用的是线，将视觉上或者内容上需要区分的内容用横向或者纵向的细线区分开来，它帮助用户了解页面的层次结构，赋予页面内容以组织性。1、全出血位分隔线全出血位原本是一个平面印刷中的概念，这里所说的全出血位分隔线通常用来凸显和强调不同的内容与区块，就像电子邮件中不同邮件之间就会用一条横贯整个屏幕的细线来进行分隔。在下面的Android 的Gmail邮箱的UI当中，用的分隔线都算是全出血位分割线。这些分隔线给人以“停止”的感觉，让用户清晰地知道界限在哪里。全出血位分割线将每一个部分都分隔开来。2、内嵌分隔线内嵌分隔线和前者不同，它通常用来区分相关的内容，诸如联系人列表中不同字母开头的部分，它常常用来作为视觉线索，便于用户来浏览大量相关的内容，当用户来浏览的时候，它们会作为路标而存在，便于用户快速的翻页浏览。视觉上，和全出血位分隔线不同，它们通常 ...继续阅读 (3)

这是我做的第三期推荐书单，之前两期有同学错过可以查看我过去的发问，本期推荐的书目里偏重互联网方向的多一点，设计师不能只看诸如“如何教你做设计”之类的教程读物，更需要的是了解产品、现象和心理学的本质，有几本是互联网经典读物，或许有些难懂，但也值得你赶紧买回去疯狂的把它们读完。如果还觉得不够过瘾，可以关注我公众号，每周三分享一本我的书籍推荐和读书笔记哦：） 失控 : 全人类的最终命运和结局[美] 凯文·凯利 / 东西文库 / 新星出版社 / 2010-12 / 88.00元购买>>一本我没来得及读完就想分享给大家的经典读物。摘取内容简介里的一段话就足够有推荐的理由给大家了：2006年，《长尾》作者克里斯·安德森在亚马逊网站上这样评价该书：“这可能是90年代最重要的一本书”，并且是“少有的一年比一年卖得好的书”。“尽管书中的一些例子在十几年后可能有些过时，但（它们所表达的）信息却越来越成为真知灼见”。“在那时人们还无法想象博客和维基等大众智慧的突起，但凯利却分毫不差地预见到了。这可能是过去十年来最聪明的一本书。” 文案发烧 : 20座ONE SHOW奖杯得主的广告心得路克・苏立文、徐凤兰 / 徐凤兰 / 中国财政经济出版社 / 2004-8-1 / 39.80元第一次读是我上大的时候，对我影响最大的一本广告类书。而且是唯一我想要推荐给大家的文字创意类专业书 ...继续阅读 (3)

@陈子木: 说设计是带着镣铐跳舞一点错都没有，看似自由，实际上其中包含了太多的潜在规则。这些规则有些是从基本的设计原则中延伸出来的，还有一些则是约定俗成的。它们并不复杂，但是非常值得注意~自从计算机拥有了图形化界面之后，图标设计就已经存在了。相比于文本，图标在人机交互上有着明显的优势：·简单、高效且友好，图标可以更好地替代较长的描述性语句。·更加节省屏幕空间，尤其是在屏幕尺寸越变越小的今天。·赏心悦目，提升整体的设计感。·最后但是同样重要，绝大多数App都在使用图标，这是用户熟悉的设计模式。尽管图标的优势非常的明显，但是设计师考虑不周的时候，图标本身所引发的可用性问题也非常之多。在今天的文章当中，我会总结AppUI设计中图标相关的常见问题，并提出相应的解决方案。希望今天的总结能够让你更好地在App 中使用图标，不用在小问题上纠结。1、图标应当正确地传达信息有时候，设计师会忽略图标作为识别性标识的基本功能——图标首要的功能是表词答意的。从定义上来看，图标是一个物体或者一个动作的视觉代表。如果一个图标无法清晰地告知用户它所代表的内容，那么无疑失去了实用价值，成为了视觉噪音。虽然图标千变万化，但是有一些普遍存在的图标还是为大众所熟知的（家庭、打印以及搜索）：易于识别的图标。但是除开这些最常见的图标之外，绝大多数的图标都因为歧义和含糊的设计而常常令用户感到迷惑。以iOS 上的游戏中心图标为 ...继续阅读 (3)

身为设计师的你，应该要…了解工程实作的基本原理业界 NG 率：接近 100%许多人认为创造力和逻辑是左右半脑分开管辖的、设计师和工程师使用的是不同部分的能力，所以大家各安其份做好自己的工作就好——我负责光鲜亮丽地画图，工程师就负责用超大声的同刻键盘在黑色的屏幕上编写外星文。但事实上这种刻板印象除了阻碍你进步以外可说是一点用都没有（而且不见得是正确的）。巴别塔的故事大家几乎都听过，会造成沟通问题的原因很简单，就是讲的「语言」不同，而非思考方式不一样——无论是什么领域，要成为佼佼者，都必须具备高度的创造和想象能力，而设计更是非常讲求逻辑的行为。所以设计师懂工程实作原理要做什么？该懂哪些部分？很简单，你不需要学会怎么写 code，但你至少需要懂得： 1. 正确称呼 UI 组件以 iOS 为例子，在 Apple 的接口设计规范文件里，每个画面构成的组件都有正式的名称，我们看看：这玩意儿叫做「Segmented Controls」，而不是「那个长得像胶囊的选单」，如果能够使用正确的术语来沟通，将能够省下非常可观的解释时间。如果你想了解得更多、更精确，将前述的规范文件读熟以后，建议你再继续研究 UIKit Catalog。 2. 有些效果就是做不出来、很难做、不该做最普遍的例子：自从 iOS 7 引入带有模糊效果的设计语言后，大家似乎都染上了高斯模糊的瘾。但这样 ...继续阅读 (4)

微博是一款典型的信息流产品，早期微博IM复用了信息流的一些设计，并且已经很久没做大的更新迭代，导致现有的设计与实际场景不符。为了让用户更自然的聚焦在对话体验之中，我们对现有界面进行了重新梳理，来看看微博设计团队对于微博IM界面的优化设计项目总结​。△ 新旧方案对比（右图为新方案）​如上图所示，在左侧旧方案上，“海淘”“音乐” 分享链接卡片就是刚提到复用信息流的卡片样式，视频、红包、音乐、文章…等等都分复用了这类卡片样式，这种样式占用大量空间，画面切割感强，容易打破会话，左右的从属关系弱并且多出一些无用信息。在布局上，国内主流IM产品的区域划分、从属关系非常明显，左侧区域就是他人态内容，右侧就是主人态内容，标杆产品微信和手Q都培养了大批的用户习惯 ，那么我们能做些什么？视觉上是如何处理的？我们这次的优化工作主要是从三个维度进行的：图形元素：由点、线、面构成的一些基本图形的表达界面布局：X轴和Y轴上个体图形和单位模块之间的间距、尺寸关系单位模块：红包、名片、图片、地图、视频、音乐….图形元素先说下图形元素，因为气泡会大量的出现，所以我们着重说一下气泡​，微博气泡有个比较明显的问题就是，气泡角过于尖锐并顶着用户头像，吸引无效注意力并让人产生不适感。​​​对比微信，微博气泡角不适感更强，主要有两个原因：1. 微信黑色文字最强，绿色气泡次之，背景最弱，它的明度是呈现逐层递减的，突出了文字，微 ...继续阅读 (4)

【译者注】增强现实、虚拟现实、混合现实、人工智能、3D打印、物联网、商业模式、商业价值、设计创新、黑客增长…这是设计师最好的时代，我们能接触到前所未有的新技术新概念新模式。在它们的冲击之下，各种设计可能浮出水面，体验设计被提及被重视被拔高。面对变化，设计师同样面临诸多挑战，用户商业平衡、大数据挖掘、新技术探寻、行业知识积累、多渠道沟通技巧、多元化说服能力、价值变现能力、创新瓶颈…这也可能是设计师最坏的时代，靠一门手艺打遍天下的局面将不复存在。本文出自99u.com的两名专栏作者Matt McCue与Kiana St.Louis对几名设计大牛的访谈整理，在日新变化的设计领域中，对苦思职业生涯发展道路的设计师有着一定引导方向的意味。在试图憧憬未来设计工作时，我们感到有些迷惘。科技正在飞速发展，五年内，移动平台已经从公司战略的新兴力量变成未来焦点，谁又能预料虚拟现实（VR）和自动化（Automation）何时成为下一个爆点呢？快速演变的工具和不断变幻的发力领域使得预测未来有些吃力，因为那些推动我们生活在10年里快速前进的科技可能尚未面世。此外，职业道路的发散使得过去在某家公司以单一渠道晋升度过余生的方式发生了巨大变化，正如设计与编程一样，这两项我们原以为互斥的技能在新的职场环境中竟成为实用的混合技能出现，使得未来职场诉求更看重全新出现的混合岗位。因此，我们找到一些设计界的先驱与专家，向他 ...继续阅读 (3)

近日苹果发布了新手机iPhone 7，小编为大家整理了目前最新最好的 Mockup 演示图素材，需要把作品给客户看的设计师们，赶紧使用这个iPhone 7来展示你的新作，让你作品更加时尚！素材包源文件格式主要是 PSD 以及 Sketch 格式，PSD 的可以使用智能对象就能轻松载入你的效果图，打包下载后，可按照本文素材名称查找对应的源文件，现在用不上的同学建议收藏起来，必备！素材打包 百度云下载：https://pan.baidu.com/s/1qXUOrs4 iPhone 7 侧透视图（PSD+Sketch）黑色银色 金色深空灰白色iPhone 7 空间透视（PSD）iPhone 7 多色样机（Sketch + PNG）iPhone 7 Plus 设计样机这个样机内还包含网格线哦！iPhone 7 扁平化风格演示图（8种配色）iPhone 7 正面4款颜色：黑、银、金、粉。每组配色都有 iPhone7 和 iPhone 7 Plus 版IOS Devices 系列这个素材所有 iOS 设备正面演示图（iPad, iPhone所有版本 mockup ）截图为 iPhone 6，iPhone 7以及其它版本请下载后查看iPhone 7 Mockup (亮黑)iPhone 7 侧视图2iPhone 7 线框图（PDF+PSD）使用这个线框图可以直接打印到白纸上绘制 ...继续阅读 (18)

点九图，是Android开发中用到的一种特殊格式的图片，文件名以”.9.png“结尾。这种图片能告诉程序，图像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框背景图片中。之前，点9图的出现是安卓机为了适配不同的手机分辨率的解决方案。 点9图（.9.png）是用于Android开发的一种特殊的图片格式，它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸，哪些区域不可以拉伸设定好，同时可以把显示内容区域的位置标示清楚。现在点9图不仅可以应用在安卓上，同样可以应用到ios切图上。 唯一的区别：安卓的.9.png必须用draw9patch.bat（苹果电脑下载：draw9patch.jar）这个工具来制作。我们平常用photoshop直接输出的.9.png只是普通的png资源。但是ios是可以使用的。安卓工程师是不能用的。 或者说如果你的9.png中没有黑线，安卓开发软件是不识别的。 严谨的来说：APP设计师或安卓工程师必须用自带的draw9patch.bat工具转换下。  draw9patch.bat工具的下载地址：立即下载 winmac 下载后解压，打开里面的draw9patch.bat  最好是添加一个快捷键在 ...继续阅读 (4)

欢迎来到电视机的新黄金时代。不仅仅因为出现了更多比从前更棒的产品，我们在自己观看和喜爱的节目上也有了更多选择。虽然我们可以随时随地通过电脑、手机和平板观看，但电视在多数人家中仍然占据着一个特殊角色。但我们对电视的控制，不再只局限于遥控和分线盒；我们开始使用智能电视，或者观看机顶盒的节目，例如Roku和Apple TV，或者使用电视游戏设备，例如Xbox和Playstation。这每一种设备的用户界面，都比老式的屏幕引导要强大百倍。与电脑、甚至手机相比，为电视设计界面仍然是相对新的领域。它也是一个完全不同的平台。为TV设计需要完全不同的思考，包括屏幕尺寸和距离、技术局限、还有使用场景。这是本系列的上篇，专注于开始思考电视的界面。我们也会特别关注游戏手柄，把它视作一种输入设备，还有手柄API的基本使用。在下篇中，我们会向你展示，如何构建TV界面原型与控件。显示器这就是电视不同于电脑、手机和平板的地方市场上第一台电视是由阴极射线管制成（CRT），一种在电视上显示不连续画面的粗糙技术。在屏幕边缘处问题尤其明显，为了补偿，CRT电视只好运用过扫描。有了过扫描，图像自身稍微放大了，所以边缘超出屏幕可视区域的外延。图片来源：Netflix由于广播电视公司预先裁切掉了部分画面，他们想要避免任何重要信息过于靠近屏幕边缘。历史上，曾经有过标题安全区，文字在此处不会失真，还有画面安全区，图片再此区域内可 ...继续阅读 (2)

相信每个人都有自己的工作方式，但并不是每个人的工作方式都是科学的、有效的。熊先生入职也有一段时间了，平时也浅薄地学习了一些书籍知识，自己总结了一个平时工作的流程，希望对在工作上摸不出头绪的小白们可以有所帮助。一、纸笔草图——灵感的迸发这一步可以说是这个原型设计的最基础的步骤，我们需要做的事情，就是让我们的灵感像喷泉一样的不断涌现出来。正因为如此，这是我们所要用到的工具是白板和记号笔，甚至就是最简单的纸笔。其他的东西从某种程度上来说，都会成为思想灵感喷发的累赘。这一阶段要集中时间进行头脑风暴，把所有与主题相关的想法留纸在白板上。二、筛选拼装——合理的舍取第二步就是根据可行性对白板上的想法进行筛选和拼接，这个阶段我们需要的工具是。。。一群可爱又挑剔的同事。其实，产品汪最令人痛恨的就是一拍脑袋一个想法的不靠谱。所以，我们在把想法记录到白板上之后，大家一起讨论，看看哪些想法是真正的亮点，哪些想法又让人有一种扇你耳光的冲动。最后，把真正的亮点拼接到一起，查缺补漏，就可以组合完成一个初步的设计方案了。三、设计原型——强迫症一般的循环完善这个步骤是一个好的想法能否照进现实的关键所在。在这里，我们将会用到Axure、Balsamiq这类原型设计工具。对于这一类的工具软件，熊先生的想法是：找个简单好用的。因为在这一阶段是需要循环往复地去修改完善，如果选用的工具过于复杂，以至于被这个工具牵着鼻子走，那 ...继续阅读 (8)

之前参加了一场由唐硕在上海主办的服务体验设计峰会，感触颇深。但是考虑到受众以及一些内容的实用性，总结了两位嘉宾演讲内容与大家分享，都是比较贴近我们这些底层设计师的。应一些小伙伴的要求终于整理出来了，但是内容大部分是我自己理解并叙述而非嘉宾原话，希望有错误及时帮我指正，谢谢。先来介绍一下此次论坛的规模，以及嘉宾吧！       嘉宾（按出场顺序）       黄峰 设计&商业Service eXperience 2016summit  服务设计体验论坛参与者来自六个不同领域的专业人士，有地产、教育、金融、物流、汽车、以及时尚品牌等许多行业。两年前，中国首个真正聚焦服务体验、商业与未来的论坛诞生，我们对于服务设计的定义是：Service Design Thinking.服务设计是全局化的，不仅限于个人，团队，部门，而是整个企业甚至整个商业生态圈。 服务体验，企业的新战略Service eXperience 2016summit  服务设计体验论坛参与者来自六个不同领域的专业人士，有地产、教育、金融、物流、汽车、以及时尚品牌等许多行业。两年前，中国首个真正聚焦服务体验、商业与未来的论坛诞生，我们对于服务设计的定义是：Ser ...继续阅读 (6)

当iOS7在WWDC 2013第一次公开发布时，苹果似乎已经沉迷于延续其软件的轻薄。字体是超轻薄的,在半透明背景上甚至很难看清，加上霓虹颜色的主题和亮白色工具栏。即使对一个有眼力的用户来说，有些特定app和屏幕上的文字及动画也很难阅读——但是结合用户的易用性需求，评论者认为，这几乎是不可能的忽视的。在 iOS 7发布之前，苹果自己纠正了一些他们的设计决策，变换了它的Helvetica Neue系统字体，从超轻字体到更明智的轻字体。这些年过去了，他们用最让人震惊的例子对糟糕的易用性设计进行了约束。在watchOS和iOS9引入了一种全新的、更加清晰的San Francisco字体，同时在操作系统上减少了透明度和动效。 在iOS 10上, 苹果迈出了一大步，对字体进行了重新定义，消除了许多操作系统多年存在的用户体验上的失策。按钮看起来更像按钮了，字体和标签也更容易阅读——不至于容易被忽略掉。苹果把iOS7的审美大规模地带到了2016年，并且首先在他们的王牌产品和服务上配置了最新的风格。字体和按钮看起来像是小的调整，不是一个可衡量的战略性方向，但是为什么它们如此重要呢？ 对按钮来说是更好的按钮在iOS7中引入的改版美学中强调简约、简洁的线条，光的排版和大胆的色彩——更多像是苹果硬件设计常做的事。 鉴于iOS6和更早期的设计模仿物理对象曾依赖于花哨而光滑的按钮 ...继续阅读 (7)

不知道你有没有那个时期，看到一些看起来高逼格的作品，因为他们被各种不认识的高逼格的线标注，非常的专业，非常的牛叉，瞬间崇拜作品和作者，心里各种羡慕嫉妒恨。不要惆怅了，这次推荐的这本《设计几何学》，带大家学习一下关于黄金分割螺旋线的理论知识，以后你也读懂牛逼的作品，甚至也可以高逼格的标注下的自己的作品拉出去炫酷了。黄金分割创造和谐的力量来自于它独特的能力，就是将各个不同部分组合成一个整体使每一部分既保持它原有的特征，还能融合到更大的一个整体团中。黄金分割矩形的构成1、定义将一条线段分为两部分，整条线段AB与较长部分AC的比值与较长部分AC与较短部分BC的比值相同。这样就给给出一个近似比 1.161803：1  用正方形构成黄金分割矩形的方法1、从一个正方形开始2、从一条边的中点A向一个对角B画一条斜线。以这条斜线为半径作一段圆弧，与正方形的延长线相较于C点。这个小矩形和这个正方形共同构成了一个黄金矩形。3、这个黄金矩形能够被进一步分割。当进一步分割后，该矩形产生一个较小比例的黄金分割矩形，它是内含黄金分割矩形（或二次黄金分割矩形），而出现一个正方形面积。这个正方形面积也可以被称为磬折形（gnomon）4、这个分割过程可以无限继续下去，产生许多更小的等比的矩形和正方形。黄金矩形独特之处在于它被分割后，得到的图形是一个较小的等比的矩形，分割后剩下的面积是一个正方形。因 ...继续阅读 (1)

UI文案，就是交互界面上的说明和提示文字，主要是用来引导用户完成操作，让他们顺利的达到目的。想要提高用户体验，简洁、明了、易懂的UI文案必不可少，它就像一个导游，直接影响用户操作的整个旅程是否顺心愉悦。那怎样才能写出让用户秒懂的UI文案呢？首先，在写UI文案之前，为了理清思路，要先搞清楚三个问题： 我（设计师）想让用户做什么？ –我写文案的目的为什么要让用户这么做？–对用户有什么好处或影响怎么写才能符合用户体验？–怎么以简洁明了的表达，让用户立刻能懂，欣然接受举个例子，设计师希望提示用户去设置交易密码，此时前两个问题的答案分别是：我想让用户做什么？   –我想让用户去设置交易密码为什么要让用户这么做？  –让用户的交易更加安全在写之前花三秒想一下前两个问题，就已经可以理清思路，确定文案内容：“为了让用户的交易更加安全，希望用户去设置交易密码”。但此时还有第三个问题没有解决：“怎么写才能符合用户体验？”以上例，有经验的文案设计师会写成：“为了让您的交易更安全，请设置交易密码”。为什么这样写更好？下面这些写作原则会给你一些帮助。 原则一  风格设计师在写UI文案时，文风越是接近网站或APP整体的语言风格，就越融入整体，也就让用户的阅读和使用越没障碍。写作时可以参照当前网站或APP的文案风格，尽量抹去个人的写作癖好，与整体风格统一。需要注意的是，一旦确定的写作风格就应 ...继续阅读 (1)

9月7日，Apple将会召开本年度的秋季发布会，发布的新产品包括新款的MacBook Pro、iPhone 7以及Apple Watch 2。但是我更加关注的是随着iPhone 7一起发布的iOS 10正式版，因为在之前6月份的WWDC 2016大会上，Apple就宣称iOS 10是「The biggest iOS release ever」，这次正式版的发布，Apple应该会对iOS 10给予重大的期望。在iOS 10正式发布前夕，本文主要针对已经发布的iOS 10的人机界面设计指南（Human Interface Guidelines，简称HIG）来对比分析新老版本的iOS系统在设计上究竟有哪些改变，有哪些设计趋势值得我们注意。 改变：越来越像给设计师用的「设计指南」首先，我们先来看一下iOS 10之前的HIG历史版本记录，了解一下在以前的版本中Apple都做了些什么：图1 iOS HIG Revision History自从iOS 7开始，每个版本的HIG都是在同一个框架中进行维护的，而且维护频率之低改动幅度之小令人发指（当然跟Apple一贯的严谨风格有关）而针对设计部分的内容一共也只有两次改动，这种情况一直持续到iOS 9，如果你愿意把iOS 7、8、9三个版本的HIG拿出来一起看，简直就是在玩找茬游戏。然后，我们再拿iOS 9 和 iOS 10 的HIG结构框架 ...继续阅读 (1)

在各行各业，尤其用户体验/界面设计中，唯有变化从未改变。当下的流行语似乎人尽皆知，而能保持对行业最新动态以及理念的敏锐嗅觉，确并非易事。尤其随着各类资讯以及资源的大量涌现，能筛选并找到于自己而言真正有用的信息，看起来愈发困难了。基于这样的情况，下面收集了一些自2016年来对用户体验/界面设计的国外最佳博客和网站资源。其中有些推荐是只有一位博主专门撰写和维护，有些则汇聚了行业意见领袖和专家的智慧结晶。各个推荐之间没有先后、排名区分，让我们一起来看看吧！1. UI/用户界面设计 下面介绍的博客网站，提供关于如何建立有效的、吸引用户眼球的界面设计的建议和方法。内容包括，移动设备、网站以及软件产品的界面设计，不容错过哦！Dribbble—设计师聚集的专业社区，设计相关话题以及UI设计都可以在这里被展示和讨论。Behance—能激发设计灵感的强大网站，任何传统/非传统的平面设计以及高质量的设计项目都能在这里创建。它并不仅限于网页或者移动端的UI设计。Site Inspire—提供基于网页的界面设计，能显示实时的网页快照和位置。目前为止，收录了2500个网站，并且可以按主题、类型以及风格来进行搜索。Smashing Magazine—领先的博客网站，提供网页设计以及开发相关的资源和信息。非常注重博客的质量，具有行业权威性。Usability Post—内容包含大量的网页设计和可用性问 ...继续阅读 (2)

我们都听过一句话：“不要想当然”，容易被忽视的往往是一些简单到极点的事实。过去几年来，用户交互进化如此迅速，设计师们都快跟不上了——导致在创建移动应用时，从其他媒介（甚至陈旧的应用设计）中照搬交互设计技巧。其实重要的是要记住：交互模式和设计要随着媒介的改变而变化。这种思想的第一阶段，可见于鼠标键盘的台式电脑过渡到触摸屏的过程中（Apple新推出的3D Touch就是个更加精细的例子）。从全新的交互模式，到微小的交互细节和趋势，每种新的设备、环境、模式和手势，都带来了机遇和陷阱。照片来源：Apple光是了解它们就要费一番功夫——更别说为它们设计了——下面是一些设计移动应用时应当避免的想当然。1. 用户总是需要创建账号他们不需要，许多时候他们不想、也没有必要。作为开发者，除非将用户固化到数据库中，否则很容易把他们拒之门外。但从用户的角度看，这不是光彩之举。凭什么要先注册，才能知道里面有什么？这个过程劳神费力，必须得物有所值。相反，用户数据可以离线储存，当用户最终决定创建账号时转移到账户中。或者，可以考虑使用“访客”或“试用”模式，开放核心功能（比如下面的Wunderlist），展现应用的功能，但是功能有限，或者带有水印。照片来源：Wunderlist一旦证明了你的应用有价值，用户毫无疑问会决定注册。在那之前，就有点过分要求了。2. 用户需要一套教程，告诉他们你的应用有多棒让用户使用，借 ...继续阅读 (3)

2012年，path首先使用了汉堡菜单作为产品的导航方式来替代原本的标签页的导航方式。一时引起了各大厂商的跟风，youtube、facebook等app都纷纷把自己的导航改成了抽屉式导航。但由于没有统一的规范，各个产品的抽屉导航设计也各不相同，为了控制Android平台日益混乱的抽屉交互方式，2013 Google I/O大会之后，Google将NavigationDrawer纳入了AndroidDesign规范当中，随后大量应用开始采用这种交互模式【1】。不过后面的事情大家都知道了，包括youtube和facebook在内的很多app都将抽屉式导航换回了原来的标签页导航。也是从那段时间开始，大家开始更加认真地思考抽屉式导航的优劣。随之而来的争辩也一直没有断过，并且慢慢的，对于抽屉式导航的批评开始占据上风【2】。我摘取其中的两则批评如下。…上图的 APP 将选项卡（tab row）变成抽屉式导航菜单（drawer menu），用户在相应功能间的切换率急剧下降。…很多用户还没有建立起相应的心理模型（尤其是抽屉式或者汉堡包菜单）尽量将 APP 的核心功能放在用户可以看得到地方。——能露出来， 就别藏着触摸操作中，手势永远要比点击优先级低。现代触摸操作习惯毕竟只流行了几年，然而传统PC上的操作习惯已经实行了将近20年。所以通过滑动来切换Tab不会比点击切换来的直观 ...继续阅读 (2)

“服务设计”是近年设计转型的趋势，“体验地图”作为一种好用的体验设计工具，在业界较多地学习运用起来。本人作为一名视觉设计师，在日常工作中也开始尝试拓展服务设计思维，试着运用一些服务设计工具帮助设计工作更有效率地开展。先作一个近期的初探成果分享。关于背景我所服务的部门是公司的企业IT部。企业IT的产品主要有两类：1)提升员工办公效率–RTXMOA审批会议云盘企业云… 2)确保办公安全–8000iOA…CDC在2015年下半年为企业IT设计了一套新VI。并开始应用在公司内的宣传。新VI是这样的（下图），也设计了一套基本的VI手册。 但是后来逐渐发现了一些问题：（如下图中）1、多种运营渠道下视觉风格与新VI不统一；2、设计质量不可控不规范，选图风格迥异，辅助元素过度使用；3、新品牌未应用到设计中；4、部分企业IT人员不知道新VI。（界面类）（运营类）如何解决品牌不统一、执行不规范、渗透度不足的问题？1、制定可遵循可应用的品牌规范；2、沉淀规范库，形成可复用可协同资源；3、推动规范执行落地，较全面地覆盖；4、在企业IT内部宣讲品牌和规范如何应用。首先重要的一步，如何制定可遵循可应用的品牌规范？具体的执行计划：1、梳理企业IT为员工提供服务过程中的场景、服务触点、视觉触点。（借助体验地图工具）2、梳理设计物list（需要制定规范、模板、设计指引的触点）并输出设计物；3、系统输出规范 ...继续阅读 (4)