在视觉设计师设计一款APP的时候，最先要制定一套完善可行的设计规范，其中会详细定义颜色、文字、图标、结构、布局、间距等要素。但是很多设计师往往会忽视一个重要的东西，那就是网格系统的构建。网格系统可以说是整个页面的骨架，它将页面中所有的设计元素高效有序地组织起来，从而让整个APP的设计具有高度的一致性和规律性，提高设计师工作效率，避免凭感觉做设计。本文将从网格系统的基本概念介绍出发，逐步探寻构建网格系统的必要性、网格系统的实际运用方法、以及使用网格系统可能遇到的坑。什么是网格系统？（1）网格系统的定义网格系统是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，控制页面元素之间的对齐和比例关系，从而搭建出一个具有高度秩序性的页面框架。例如：谷歌的Material Design中，将整个页面看做是一个网格，所有页面元素都与网格线对齐，并且将这一规则贯穿于整个产品的设计中。（2）网格系统的由来早在20世纪初，德国、荷兰、瑞士等国的平面设计师们就开始提倡用客观的设计原理进行文字的编排，二战后这种理念在瑞士得到了良好的发展，直到20世纪40年代后期，第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 约瑟夫·米勒-布罗克曼 所著的《平面设计中的网格系统》一书，自1961年出版以来畅销至今，对设计界有着深远的影响。目前，网格系统已经广泛地运用在杂志、 ...继续阅读 (8)

Tubik Studio ：我们的日常生活中总是面临着无尽的选择，大量的挑战。设计的决策也是如此，一个正确的决策会受到很多不同因素的影响，经验，知识，事实依据，还有别人的建议等等。在进行UI设计的时候，配色方案的选取是需要通过合理的决策来判断的，是使用深色系的配色比较好，还是浅色系的配色合适？影响配色方案的因素正如同我们所熟知的，配色方案的最终确定受到多方面因素的影响，它不仅涉及到用户，而且还受到业务目标，市场条件和当前设计趋势的影响。让我们简单回顾一下在这个问题上必须考虑的基本因素吧。可读性和易读性这两个概念都和文本内容的感知直接相关。可读性指的是人们是否可以轻松阅读单词、短语和内容块的高低，而易读性则指的是用户能否便捷快速地识别特定字体中字母的度量。在进行配色的时候，应该将这些因素纳入到考虑当中来，特别是涉及到需要填充大量文本的界面的时候。配色方案对于界面中文本的感知有效度有着至关重要的影响。在白色或者浅色的背景上，显示黑色的文本，比起在黑色的背景上显示白色的文本，看起来要更显著、清晰度也更大一些。较差的可读性将会直接带来更差的用户体验，用户无法快速扫视数据，甚至会在视觉上产生莫名其妙的混乱，甚至导致用户错过关键信息。这是否意味着浅色背景的可读性更强呢？并不一定。著名的UX设计大师 Jacob Nielsen 曾经提到过：“文字和背景之间应该采用高对比度的色彩。白色背景上的黑色 ...继续阅读 (7)

在业务迭代周期内，产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中，有时会出现一些拿捏不定的设计细节。比如，试图推出某个新功能时所设计的图标，它的应用效果如何？如果你还在头疼诸如此类的问题，那现在就可以take it easy了，因为你即将拥有一个得力助手——图标的可用性测试，来帮你排解疑惑。如何拥有呢？还请认真阅读本期内容。图标的可用性测试，测的是什么？以下有4个指标，用于判断图标是否可用。可查找性（Find-ability）：用户是否能在某页面上找到该图标。可识性（Recognition）：用户是否能够理解图标所代表的意思。预测性（Information scent）：用户能否猜到点击图标会发生什么。吸引力（Attractiveness）：图标是否美观。以上这些都是关乎设计是否成功的关键方面，在思考如何改进一个图标的时候，必须分别考虑。如何进行图标的可用性测试？图标的可用性测试的方法，可以主要分为2个类别：脱离情境的测试（out-of-context testing）和情境之中的测试（in-context testing ）。选择哪种类别，取决于测试时，图标是单独呈现给用户，还是在真实完整的界面之中呈现给用户，前者是脱离情境的测试，而后者则是情境之中的测试。1. 可查找性（Find-ability）测试图标需要被展示在完整的真实界面中。因此，需要采用情境之 ...继续阅读 (7)

在过去的2年当中，设计领域一直在探讨UX写作（UX Writing）这一“新兴”的设计分支。实际上，即使是对于许多专业的UX/UI 从业者而言，这个词汇其实还是挺令人懵逼的。有些人认为这是“用户体验设计”的新提法，有人认为它只是与UX设计相关的文案。在今天的文章当中我们将会探讨清楚，UX写作到底是什么，以及正确的使用方法。UX写作是什么这个词汇可能比较新，但是UX写作的这种设计流程，在实际的设计应用当中，其实已经存在很长时间了。UX写作，实质上指的是，为了更好地引导用户，并且帮助用户在实际交互中更好地运用产品，而合理地打磨出拥有更好用户体验的文案的过程。UX写作，主要的目标是解决用户和数字产品之间沟通的过程。UX设计师在进行UX写作过程中所产生的文案，通常也被称为微文案（Microcopy），指所以有这个称谓，是因为这些文案是为了服务用户，提供引导和提示而存在，以区别于其他的目的性更强的普通文案。更具体的说，微文案主要存在于按钮和菜单这类UI控件当中，还涵盖了错误提示、安全说明、服务条款以及其他用于提示和引导的产品界面中的控件。为何需要UX写作？微文案是APP和网站不可或缺的组成部分。为什么会将写微文案的过程表述为UX写作呢？UX写作能成为现在这样一个相对独立的分支，原因之一是UI中的文案得到了越来越多的重视。营销和设计领域的专家认为界面中文案对于用户的影响越来越大。错误的文案表述 ...继续阅读 (6)

在APP设计中，有很多组件有着类似的功能和用法。如何正确使用这些组件？这些组件之间有什么区别？一起看看作者的解读。在设计iOS版和Android版的APP过程中会涉及到很多组件。不同的场景使用的组件也不一样。这篇文章讲述六组常见的相似组件的区别和用法。警示框（alert）和底部操作列表（action sheet）标签栏（tab bar)和工具栏（tool bar）底部动作条（bottom sheets）和菜单（menus）选择器（selector）和底部操作列表（action sheet）下拉菜单（drop-down menu）、底部操作列表（action sheet）及活动视图控制器（activity view controller）snackbar和toast一. 警示框（Alert）和底部操作列表（Action Sheet）警示框是传达应用或设备某些状态的信息，并且常常需要用户来点击操作。底部操作列表展示了与用户触发的操作直接相关的一系列选项，包含两个或以上的按钮。一般含有三种以上操作使用底部操作列表，一种或者两种操作使用警示框或底部操作列表。例如：iOS原生邮箱，点击「更多」出现底部操作列表，展示四种操作选项。推特的退出登录需要二次确认，使用的是警示框。对于警示框（alert）和底部操作列表（action sheet）的困惑多用于二次确认上，例如微信的退出登录使用的是底部操 ...继续阅读 (10)

苏大牙牙牙：众所周知，像专业知识、设计技法、设计的方法论，对于设计师来说非常重要，也是立足之本。但是，随着工作的时间越久越发现，自驱力、工作态度、个人性格，等等的方面，同样影响着我们的职业生涯。尤其是“自驱力”，决定着我们在设计道路上，能走多远、做多深。它也是从工作以来，对我个人成长影响最大的一个因素。所以跟大家分享下，我运用自驱力的成长方式和培养自驱力的方法，希望对你们有所帮助。1. 什么是自驱力？我尝试着把它定义为：做某件事情时，不受外界因素影响，不局限于眼前利益，而为了自己长期目标和获得成就感，而自我驱动完成的方式。2. 我的自驱成长路径为了对不同阶段的同学都有所帮助，下面分为三个阶段，以自己亲身经历，来分享如何在不同环境下，利用自驱力得到成长的。分别是：a.创业团队，b.中型公司，c.大的平台。a.创业团队这是大家经常碰到的问题，包括公众号后台，也好多人跟我留言抱怨。其实在我刚毕业的第一年，2013年，也是在创业团队。去了没几天带我的FC同学离职创业了。接下来，我自己独立负责移动端项目，从刚开始的一个终端，到最后同时负责4个端：iOS，安卓，TV，Pad。对于刚毕业的我来说，是个很大的挑战，只能白天工作，晚上自学。很多时候，都是晚上发现了好的设计或者有了好的想法，白天就在自己产品上尝试。在没人带的情况下，我的自驱学习方法是：1.看；2.玩；3.练；4.读。1.看看，不仅要多 ...继续阅读 (17)

腾讯ISUX ：目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：一. 通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。这种做法虽然不符合苹果要求的设计规范，但由于短时间内更新全部 banner 的成本太高，可以先这样简单处理，后续再优化 banner 的设计展现。底部 Tab 栏 / 操作栏有些页面使用了底部 Tab 栏 / 操作栏，由于 iPhone X 去掉了底部 Home 键，取而代之是34px高度的 Home Indicator ，对于目前的底部 Tab 栏 / 操作栏会造成一定的阻碍。解决方案：在页面底部增加一层高度34px的适配层，将操作栏上移34px，颜色可以自定义。二. 非通栏页面底部 Tab 栏 / 操作栏原因同上，在底部有34px高度的 Home Indicator ，对于目前的底部 Tab 栏 / 操作栏会造成一定的阻碍操作。解决方案：在页面底部增加一层高度34px的颜色块，将操作栏上移34px，颜色可以自定义。三. 关于安全区域这里可能有人会有疑问，为什么非通栏下的页面内容是通到底部的，而按钮 ...继续阅读 (7)

这周手机圈的热点，被iPhone X无情的霸占着，连谷歌发布了Android 8.1预览版这样的大事，都几乎无人关心，不管怎么样这个新系统的正式版将在12月被推送。对于Android 8.1系统来说，谷歌依然是优化设备续航，提升设备流畅性和易用性，同时系统还对无线设备连接做了更好的优化，毕竟抛弃3.5mm耳机接口已经是谷歌表明的态度。 现在谷歌还展示Android 8.1首个版本的一些细节，比如新系统换上了全新的名为“Product Sans”字体，这依然是他们自己设计并制作的字体，如果你想体验新字体也很容易，其已经被提取出来，并可供任何愿意安装在手机上的用户使用。至于新字体的变化，文字字体显示边缘看起来过度更圆润，不会是以直线的方式终止，这对于阅读体验和排版都是有极大的帮助，有开发者表示，新字体调整后让系统阅读起来会更舒爽。 ...继续阅读 (4)

王M争： 今天来给大家分享产品设计中文字配色的一些知识点。要给文字配色，首先我们要知道你的产品(界面)中有哪些文字。在这里，我将产品中的文字主要分为以下四种：标题类、正文类、提示类和交互类。标题类首先来说标题类，标题，顾名思义要让用户在短时间内了解界面的大致内容，讲究简洁明了。在app中，标题类一般有的顶部栏标题，底部栏标题，列表标题、表单标题等。给标题类文字配色相对来说比较简单，选项比较少，我们一般只会使用深灰色或者企业色。因为标题虽然很重要，但是也不能过于抢眼。而根据重要性程度我们可以把标题分为不同的等级，一般来说，层级越低的标题颜色越浅。深浅的搭配可以给你的界面带来意想不到的效果。例如，微信中的好友列表和聊天界面中，用户名和聊天记录的文字颜色深浅正好是反过来的。这个其实也很好理解，好友列表中用户关注的是好友是谁，而到了聊天界面用户更关注的是好友说了什么。所以这里用深浅不同的文字来帮助用户加以区分。我们可以看下使用同样的配色的效果，感受一下不同。我不太建议给标题使用企业色，因为你要调整企业色的饱和度来区分不同的等级，个人觉得这样不太合理。此外如果标题体系过于繁杂，仅从颜色深浅已经无法让用户从视觉上进行识别。我们还可以用字号来帮助完成区分，事实上现在大多数产品都是通过字号的不同来完成等级区分的。正文类正文类文字是给用户提供详细说明和解释的，正文类文字要比标题类要浅一些。一是因为用 ...继续阅读 (2)

网易UEDC – 董俊豪 ：品牌设计，是品牌之间形成差异化的根本原因。它可以让用户明确、清晰地记住并识别品牌的个性，是驱动用户认同、喜欢乃至爱上一个品牌的主要力量。拿保时捷汽车前车灯的设计为例，这种特殊的外观设计被严格地应用到所有保时捷的汽车产品当中，就算遮住品牌也能一眼分辨出该品牌，这就是品牌的力量。回归到我们视觉设计，我们在接需求的时候，经常会听到运营及产品对页面设计的要求是品牌感，那么怎么样设计才有品牌感？下面就谈谈网易严选App，在品牌设计方面的尝试，在这之前我们先来了解下网易严选。品牌分析网易严选，是网易自营类家居生活品牌App，秉承严谨的态度甄选天下优品。严表示严谨的态度，选是甄选，甄选天下好物。设计原则网易严选的品牌理念是「好的生活，没那么贵」。可以想象以下场景，躺在懒人沙发上悠闲的看着书，坐在窗边惬意的喝着茶，抑或是靠在阳台上享受午后的阳光。他们不紧不慢，追求品质，享受宁静，所以品牌关键字是品质、生活、宁静。从品牌关键字提取到的设计语言是细节化、场景化、简约化。细节感是指精致，比如商品的光影，产品中的对齐法则等。场景化讲究的是自然和谐统一；简约化是去除一切多余的元素，只留下素材或者产品本身。品牌设计了解了品牌性格，品牌关键字及品牌设计语言，我们将这些应用到具体的设计中，包括品牌logo、版式、图标、动效、图片等。1.Logo设计品牌Logo以形象、直观的形式向消费者 ...继续阅读 (4)

视觉原理在当下红火的机械视觉中是必不可少的，那么在我们日常工作的UI产品设计中又有什么可能性的呢？今天，我从「视错觉」这个角度，探索下如何运用在UI上。视错觉历史古希腊哲学家亚里士多德的《灵魂论》里阐述了人类五感：视觉、触觉、味觉、嗅觉和听觉。我们视觉设计师暂时无法在长方形盒子（泛指各种电子设备）内设计味觉、嗅觉和听觉，而对于触觉，说到底，我们始终在与这个长方形盒子接触，但是无法通过对设计内物体的真实触摸而得到感觉，实际伸出手探寻或步行而感受到距离等，去比较大小、距离等进行认知。因为这个客观存在，也更加需要我们视觉设计师运用视觉原理与技法让用户更容易与机器进行交互。因为这样的认识， 我思考了以下这些可能性：一. 蓬佐错觉-Line蓬佐错觉是有关长短的视错觉。自从意大利心理学家马里奥·蓬佐(Mario Ponzo,1882~1960)发表了相关论文后，这一视错觉便被称为蓬佐错觉，但在这之前，它就早已被人们所熟知。上图上下并列的两条横线，上面的看起来比下面的长。有一种观点认为这是因为横线外侧的斜线使大脑觉得有纵深感，认为上面的线更远一些。长度相同的线段，位于远处的应该更长一些，因此上面的横线会让人觉得比下面的短。这一视错觉在UI运用上，第一个让我想到的就是Input、Cell或段落间的分割线。各App的长短不同，大多数App都按照iOS或Android Guideline，在各控件左右 ...继续阅读 (5)

什么是反馈？反馈就是用户做了某项操作之后，应用系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。为什么反馈设计是用户体验重要的一环？在人机交互的过程中，用户希望看到每一步都清晰，及时的显示，用户希望了解每一步的后果以及用户最关心的问题是什么。一方面，PC端和移动端产品需要保证产品有积极，及时的反馈响应以确保用户知道自己所处的状态，否则会让用户觉得反应迟钝；另一方面，我们也要避免过度的信息反馈，尤其注意不要反馈错误信息，错误的信息对用户造成的影响是巨大的。产品的反馈直观的表现为界面的变化（少数为声音和震动），通过这种变化使的用户能够更加友好高效地与产品进行交互，更加专心地投入到任务流程当中去。举个栗子：当用户执行完一步操作后，系统没有及时甚至没有给出相应的反馈提示，就会给用户带来疑惑（实现模型与心理模型冲突），让用户不能确定自己的操作是否被执行、执行是否成功、执行整体进度、或者是执行后会产生怎么样的影响、能在哪里查询到结果以及执行后是否可以被撤销等等。而这其中的任何一个环节都有可能影响到用户对当前任务的理解以是否执行下一步操作，从而影响到产品的用户体验。反馈的设计应该满足以下四个原则：反馈通过直观的体现，可以帮助用户理解微交互的规则，最大可能地降低用户的学习成本。别让反馈给用户造成压力，通过最少的反馈传达同样的信息。反馈应该由需求驱动，然后在恰当的场景下和时间 ...继续阅读 (6)

echo：文章对制作统一可复用的Axure元件库方法进行了相关的分享，希望对你有所受用。阅读这篇文章你可以得到哪些？iOS和Material Design(简称MD)元件库下载。通过源文件学习iOS和MD两大设计规范的组件控件体系。如何通过Axure元件库提高效率。作者制作的元件库基本包含了两个系统的所有常用组件控件，适用于移动端绝大部分设计场景。同时所有元件都可再修改，方便大家使用。下载地址：https://pan.baidu.com/s/1mhPlNQw一. 统一可复用元件库价值统一产品的用户体验：涉及到多个交互设计师/产品经理协同时，如果各个交互设计师/PM没有使用统一的元件时，会出现同一种类型不同的组件设计。视觉设计师最终没有强行统一，那么实现稿就会出现各式各样相似的组件。提升工作效率：有了统一的axure元件库，交互设计师/PM可以快速根据元件库搭建界面，从整体的产品设计到开发流程环节提升效率，避免重复性工作。提升设计综合能力：由于减少了做组件重复性劳动，交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务产品创新。二. 如何制作统一可复用的Axure元件库打开Axure软件，在元件库面板中，点击快捷菜单按钮，选择「创建元件库」，如下图所示：选择了「创建元件库」后，就会弹出一个界面，你需要选择一下元件库的保存路径。注 ...继续阅读 (6)

UI妹儿（ID:UIfaner）：上周，U妹刚完成了一个微信小程序项目设计，这是U妹做过的第3个小程序，早在去年小程序还未开放时，就设计了第1个小程序，在小程序正式开放后，设计了第2个，在U妹做第3个的时候，突然发现小程序的设计规范有了新变化，所以U妹觉得很有必要把最新版的微信小程序设计规范分享给下伙伴们。概要基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。一.友好礼貌为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。 1.重点突出每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。反例示意此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。 纠正示意去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。 反例示意操作没有主次，让用户无从选择 纠正示意首先要 ...继续阅读 (5)

金蝶云之家体验部交互设计师-王梓铭：大家有没有想过为什么按钮越大，越易于点击 ？为什么相关按钮需要相互靠近摆放 ？为什么 Win 系统要将「开始」按钮放在角落 ？这些设定的背后其实都有一个在人机交互中，非常重要的定律 —— 费茨定律。上期回顾：《大产品小细节！5分钟了解格式塔原则》一. 概述首先来看看费茨定律公式：看起来很复杂吧， 但实际上并不难，我用一张图给大家解释下费茨定律是什么。当用户需要拖动黄色点到目标区块中时：费茨定律中的 D 就是从开始点到目标中心的距离，而 W 则是目标的宽度大小。根据公式可以看到，A和 b 都是常量，那么 MT （黄点从左移到目标中心所需的时间）的大小取决于 D 和 W 的值：当 D 一定时，W 越小，MT 越大；W 越大，MT 越小。当 W 一定时，D 越小，MT 越小；D 越大，MT 越大。解释一下就是：当距离一定时，目标越小，所花费的时间越长；目标越大，所花费的时间越短。（小而远的目标区域意味着用户需要将黄点移动较长距离，并且为了能对准目标还需要做一系列的微调，因为目标比较小嘛，所以耗费的时间自然就长了。）当目标大小一定时，起点离目标中心的距离越近，所花费的时间越短；距离越远，所花时间越长。（这比较好理解，距离比较近嘛~ 所花时间自然比较短了。）二. 启示与案例按钮越大越易于点击正如前面提到的，如果你想要让按钮的点击率更高可以尝试将按钮做大点， ...继续阅读 (6)

译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。往期：《iOS 9人机界面指南（一）：UI设计基础》《iOS 9人机界面指南(二)：设计策略》文章索引3.1 3D触摸(3D Touch)3.1.1 轻压和重压(Peek and Pop)3.1.2 主屏幕快捷操作(Home Screen Quick Actions)3.2 Live Photos3.3 钱包(Wallet)3.4 苹果的移动支付平台(Apple Pay)3.5 研究型应用程序(Research Apps)3.6  应用扩展(App Extensions)3.6.1 今天部件(Today Widgets)3.6.2 分享和动作扩展(Share and Action Extensions)3.6.3 图片编辑扩展(Photo Editing Extensions)3.6.4 文档提供者扩展(Document Provider Extensions)3.6.5 自定义输入法(Custom Keyboards)3.7  HomeKit3.8 多任务处理(Multitasking)3.9 通知(N ...继续阅读 (13)

最近为了团队能做好产品首页设计，我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次（国内to B产品起步较晚，在设计方面的研究几乎空白），而这种差距和设计技法没有太多关系，更多的是对产品个性的把握和传达。△ 国外一些to B 产品的首页设计以上是我随便找的几个产品的首页截图，大家感受下。总的来说，国外设计有以下几个特点：一、超高逼格（放大看）所谓“高端大气上档次”，可能也就是这样了吧。由于我不是专业做视觉设计的，所以也很难说出其中的原因，相信视觉设计师会从不同的角度讲出很多门道。二、充满个性（缩小看）我认为“个性”是中外设计最大的区别：中国的设计师比较注重是否满足客户需求，是否符合产品定位，是否美观和谐，细节是否够精致；国外的设计师除此之外，还非常注重整体感和产品个性的表达：每个网站风格看起来都非常的与众不同，你很难找到看起来非常雷同的设计，而国内设计雷同的网站比比皆是。国外to B 产品首页缩小后，依然可以快速辨认国内to B产品首页缩小后，辨认较困难比如上图所示，国外的to B产品首页辨识度较高，即使缩小后，我依然可以轻松辨认出是哪一家的网站。而国内的to B产品（我找的都是国内顶级的大公司或行业知名公司）首页缩小后，辨识比较困难（尽管我对这些网站都很熟悉）。三、品牌感强（看首屏）国外网站让我感受最深刻的，是对品牌的塑造和表现力（第 ...继续阅读 (10)

对于TinyPNG，很多小伙伴可能并不陌生，TinyPNG是一个在线图片压缩工具，对于PNG图片（或jpg图片），它可以将无法通过普通软件压缩的图片进行独特的二次压缩，达到节省资源的目的，通过TinyPNG的压缩，我们发现，一般的PNG图片甚至比jpg文件都要小，同时却可以保持几乎无损的质量。这就是TinyPNG的魅力所在，如下图的带有可爱大熊猫的网站，便是TinyPNG的官方网站。对于单个或者少量图片的压缩，我们只需把图片简单的拖动到网页的虚线框中即可，压缩完毕后一个个的下载。但对于几百甚至上千个文件这样的工程，我估计大家一定会倒吸一口凉气。那是否有批量处理且免费的方法呢，没错，Sketch measure的作者utom大招又来啦，通过u大编写的脚本，即可实现每个月500张批量免费压缩的功能。第一步首先，访问如下地址下载u大编写的脚本文件（只能mac电脑使用哦）https://github.com/utom/tinypng-for-automator下载后解压，打开后出现两个文件 第二步 看到这个机器人的图标了吗，对的，这就是我们平时可能使用不多的,但是可能会在应用程序文件夹里看到的一个工具，名为Automator。他是做什么用的呢？Automator是苹果公司为他们的Mac OS X系统开发的一款软件。只要通过点击拖拽鼠标等操作就可以将一系列动作组合成一个工 ...继续阅读 (17)

编者按：看了那么多的格式塔科普文章，仍然不懂？有这篇就够了！想要在界面排版、网页设计中让整体视觉井然有序，舒服协调，格式塔就是必须掌握的知识咯，今天的教程用深入浅出的方式给同学们科普格式塔原理以及在设计上的运用，包含大量实例，新手也可以轻松看懂！在界面排版，网页广告设计等视觉传达设计工作中，视觉上的画面琐碎，零散，信息混乱无序总是视觉设计师无可避免的问题。视觉的整体感做不好，会给人不舒服，不协调的心理感受。这些问题来自人们的主观感受（“不舒服”，“奇怪”），通常难以描述清楚。同时，设计师们也意识到：表现作品的整体感与和谐感是十分重要的。无论是设计师本人或是观者，都不欣赏那种混乱无序的形象。但是，“有毛病，不舒服，奇怪”等直观感受的词汇却很难帮到设计师修改方案。设计师需要明确的知道“WHY”多年以来，心理学家们一直想确定，在知觉过程中，人的眼和脑是如何共同起作用的？ 而视觉感知，是其中的重点。格式塔理心理学述及了这样一个观念，即人们的审美观对整体与和谐具有一种基本的要求。简单地说，视觉形象首先是作为统一的整体被认知的，而后才以部分的形式被认知，也就是说，我们先“看见”一个构图的整体，然后才“看见”组成这一构图整体的各个部分。我们可以从格式塔中了解到视觉形象对人的心理影响，这里也包括了对界面，广告等视觉信息的感知；网上有许多格式塔文章，但观念不尽相同。在这里写下我并不成熟的思考，欢迎大 ...继续阅读 (13)

前言：这篇短文将会探讨UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些对于有效的GUI动效设计的建议。我们将在下文中，简单探讨如何改善下面的这个交互。相关好文推荐：《盘点那些应该杜绝滥用的设计》UI动效设计的反面案例（线上Demo）注：这个反面案例并非假设，而是来自近期的真实客户案例。 概述自从 70、80 年代首个光栅图像在CRT屏幕出现以来，人们对于（数字）视觉设计的态度一直在不断进化。与其他艺术领域不同，在数字设计领域显露的趋势，与使用设备的发展史紧密相关。设备能力的提升有目共睹，显示器技术使分辨率从CGA320*200，到VGA的640*480，然后到SVGA的800*600，到现在已快速提升至4k及以上。类比视觉设计发展历程动效设计正在经历成长的疼痛，正如在当年90年代和21世纪初的视觉设计。追溯视觉设计进化发展的过程，有助于我们去理解现阶段的动效设计。21世纪初期的网页设计在更精妙的设计语言出现之前，设计师们在初期阶段容易滥用新功能，这是正常的。90年代末和21世纪初的界面设计师，应该还记得以阴影、斜角、高光，无留白这特征的过度设计。当设计师们着迷于新媒体，并陶醉于像素的奇妙时，这一结果再自然不过了。扁平化设计扁平化设计示例 不管你喜欢与否，扁平化设计在设计圈中已成为主流思想。所有的主要系统平台（Android、iOS、OSX、Wi ...继续阅读 (9)

工欲善其事，必先利其器。今天，我们将针对设计师朋友，提供 24 个精选软件，推荐主要来自《Fastcompany》访问 HUGE、ZAPPOS、USTWO、OKFOCUS 等团队的顶尖设计师，看他们平常都使用了哪些软件来帮助工作。高手都离不开的神器，同学们看哪个合适赶紧带回家。以下介绍的 App 可能很平凡如 Gamil，也可能很奇妙，充满着可以帮助你快速发想、创作的好工具。不管是哪一种，以下的 App 都是设计师们工作时必不可少的好帮手！ATEXT这是一个：Mac 应用，可以自动将你打的缩写字转换为文本。为什么一定要下载它？「这个超方便的，特别适合建制日期、时间的模板，可以帮助你快速写信等等。它里面有内建好很多缩写字，你也可以自己设定。」ustwo 产品设计师 Lee Simpson 推荐。ATOM这是一个：来自 Github 的一个跨平台、方便破解的文本编辑器。为什么一定要下载它？根据 Moving Brands 的资深设计师 Toby Milner-Gulland 所言，ATOM 的版本控制选项以及多功性都让它成为不可或缺的好伙伴。AXURE这是一个：跨平台应用，以及网页原型创作工具。为什么一定要下载它？「Axure 是我们创作原型的工具，」Zappos 的 UX 设计师主管 Jason Broughton 介绍道，「它帮我们快速的建立设计原型来给用户测试、建立档案，以及帮助 ...继续阅读 (9)

 下面我们就直接来看下APP从业者必知的整个APP开发标准流程。一般的APP开发及上线流程 步骤如下：首先，制作一款APP，必须要有相关的idea（主意），也就是说，第一步是APP的idea（主意）形成。其次，就是通过那些idea来进行APP的主要功能设计以及大概界面构思和设计。App的开发是一个不断推敲的过程。首先，如果要做一款app，必须要前期进行沟通，初步表明此款app要实现的效果，属于哪个类型的app。在功能和实现价值基本敲定的情况下，开始进入项目评估阶段。这个时候产品经理会根据之前商定的功能进行价格和工期的评估，确立一个初步的项目排期。在系列的前期工作得到客户认可的情况下，签订合同正式开始项目。项目开始各个部门就开始项目的碰头会议，设计部门开始设计UI（产品界面）和UE（用户体验），针对产品开展创意设计，形成初步的效果图，经过首次客户的确认。在根据交流的具体结果进行二次修改，最终与客户确认高保真视觉图，开始进入研发阶段。经过工程师的一段时间研发，产品基本成型，正式开始测试。测试合格，确认没有bug后与客户进行沟通，开始验收。由客户进行测试，提出修改意见。客户验收合格满意后，开发者会将app交付客户，客户根据APP预估的访问量、用户数量等来进行服务器的选择，服务器可以自己购买管理，也可以购买后托管，也可以直接租赁。服务器的好坏也直接影响APP用户体验的好坏。选定好 ...继续阅读 (16)

计算机辅助的设计中，一般人可以轻易的凸显任何内文。只要透过 Word 等基本文书编辑软件内的 i, B, U 等按钮，或任意改变文字颜色，就可以达到基本的强调。但是，这些设定对读者而言，究竟是干扰还是帮助？过去数百年的排版惯例又可以告诉我们哪些实用而合理的规则？写在前面：如果‧‧‧‧‧‧强调最好是一个字、一组词就好，非必要请勿使用。过多的强调法使用，其实等于没有强调。认识到这个最基本的前提我们再谈谈不理想的强调法。不理想的强调法：底线、假粗体与假斜体除了要特别讨论的上色之外，最常用的强调法不外乎「加粗」、「变斜」或是「加底线」。加粗、变斜是透过墨色浓度或形状变化与正文对比，这发源自西方数百年的排版规则；加底线则是打字机盛行之后留下的遗产。避免用底线强调在中西方的排版规则里，从来没有发生过加底线来强调的情况。底线是打字机留下的遗产。打字机上并没有其他变化，只能装正文，无法变化成斜体、粗体。所以就产生了底线设计，补足没有强调法的缺陷。但是我们可以来看一下，底线真的是有效的强调法吗？底线加上去到底比较接近干扰还是强调呢？相信大家可以透过这段文字看出来，底线强调法会让底线抢走字本身的风采，让我们注意线多过于文字。不论对中英文而言，底线都并非理想的强调法。专业的设计师或排版工匠还是会告诉你，最好使用正统的强调法：粗体 (bold)、斜体 (italic) 等等。（这里特别是就西文而言）补充： ...继续阅读 (5)

用户与产品的每一次互动都是一次加载过程，加载的好坏直接影响用户与产品的交流体验，即将加载策略运用到适合的产品情境中可以将产品塑造成一个可以和用户交流的“人”，这个“人”彬彬有礼、善于沟通、聪明伶俐，想用户之所想，急用户之所急。1.启动页加载产品的第一印象很重要，如果用户刚开始打开一张“空白页面”，用户还未与产品交互之前，就已经留下一个差印象，就像谈对象，你给对方的第一印象就是邋遢，后面尽管每天都打啫喱，对方也会觉得这是几星期没洗头的节奏。因此启动页的出现就是为了给她（用户）营造一个好的第一印象，其次产品启动需要一个过程，而“启动页加载”可以实现这一过程的一个过渡，在给予用户一个响应的同时预加载部分首页内容，使得用户不至于看到空白的页面，体验上更趋流畅。1.1 保持过渡的流畅性：一致性与内容感通过启动页的吸引，将用户带入产品的品牌与情感的世界。基于IOS平台应用的启动特质（放大特效），Twitter的启动页与Icon采用了一致的元素与构图（信鸽为物，湖蓝背景为底），确保Icon至启动页的平滑过渡、加深了用户对Twitter的品牌印象，同时呈现“信鸽翱翔蓝天”的意向使得产品的固有等待（产品启动需要一个过程）不易为用户所察觉(启动页呈现的意向还没遐想完，产品已经顺利过渡到首页了)。接着“信鸽”以同样的效果完成主页内容的过渡。这里我们再举一反例：WPS的启动页大面积留白使其在过渡过程中由于 ...继续阅读 (17)

鸿影：我在之前的用户体验设计实践经历中，所做的项目绝大部分都属于『从0到1』，以被动地接收分析产品经理提出的需求、然后不断设计全新的产品或功能为主，一个项目完成后就基本不再管，后续的运营数据也不关心，而是立马投入下一个新的项目中去。这种四处忙碌的感觉看起来很充实，但实际上却有些浮躁，作为设计师没有完整地参与进产品设计闭环，少了数据验证、迭代改进的步骤（这正是当初Mentor不建议我毕业后去设计咨询公司的核心理由，但IT互联网公司不停地出新APP，出完后就不再更新的案例也不少，不点名黑了），对产品也难有产品经理那种Owner的感觉，缺失主动推进产品不断优化改进的意识，发挥出的价值和赢得的话语权与信任感因此受限。但是当长期跟着一个项目时，在完成了『从0到1』的阶段后，就进入了『尴尬期』：整块的设计需求变得很少，更多是功能体验上的修修补补，工作成就感降低；有了一些用户反馈，但缺少系统地整理、甄别，而是盲目地依据反馈修改设计；项目组永远有他们认为更重要的事情（比如修BUG）需要先做，而设计师看起来有些『无所事事』……这种不充实的状况一度令我感到烦躁不安，于是寻求或等待新的项目/功能需求/改版的到来以期结束这一局面，但其实这便回到了本文第一段所说的状况。于是我开始思考：在看起来好像『没什么事情做』，有也是各种琐碎修补的产品上线迭代期，我还应该一直被动地『等需求』做设计吗？我是否应该更主动一点 ...继续阅读 (7)

部门周会上有一个环节是每个同学讲述本周之最：最认可自己的、最反思的、最困惑的。其中，最认可自己，代表自己阶段性的成就感，在从外界取得成就感之前，首先自己要认可自己。最反思，要注意，不能只反不思，要记录下来，看看自己再过一段时间是否在这个反思点上有所提升。最困惑的，则可以抛出来，看看别的同学是否可以给予一些帮助和建议。所以，每周，我们都要从最困惑的议题中带回一个自己研究并于下周进行分享。本周我就带回了一个新人提出的“时间管理”方面的困惑。那么在为新人想一些时间管理方面自己所仅有的经验时，我把议题从“时间管理”换成了GTD。GTD：Getting things Done! 把事情搞定，这是时间管理的目标，只有高效地把事情搞定，才能解决关联的其他的问题：工作严重影响生活，上班焦虑症，没有成就感等等。GTD有问题的几个症状则是：1. 忙：每天都很忙，TO-DO LIST上永远有做不完的任务。2. 达不到期望：所以每个任务都无法做到自己要的完美，有时也无法让对方满意。3. 焦虑：但是心里焦虑的是大块的重要的事情，总是没有明显进展（比如产品半年规划）4. 没有时间思考、创新：说是要无中生有，自己想事情做，可是哪里有这样的时间……不过话说回来，即使我写给别人，也未必说明我的GTD就是很赞的，我照样有着很严重的拖延症，经常把不想做的明知又很重要的事情拖到最后一刻。但是所幸有以下的一些方法，后果都可 ...继续阅读 (14)

现如今的读图时代决定了图在平面设计中是非常重要的，图大致可以分为两种，一种是照片，一种是图形，一个好图不仅能传递作品所要表达的信息，还可以提升设计作品的格调，这期文章我们就跟大家分析这方面的内容。作者：IMART来源地址：站酷 ...继续阅读 (17)

最近明明（人家真叫明明）和我抱怨说：老大总是说我设计东西慢，效率低，真是烦死了，要知道设计的好又快的东西这个世界上是没有的！然后发了一张大家都看过很多遍的图片：在安慰明明情绪之余，我也思考起设计的效率问题来，在我看来设计其实与其他的工作并没有太大的区别，不过是问题的解决之道，首要的是解决问题，然后再去做更上层的情感和灵魂性的东西，如果这样的思路理解，那么设计一定有效率高低之分。闲暇的时候我会下厨，其实做设计和下厨真的很像，下厨你需要准备食材、然后烹饪、然后出品、最后整理厨房，再来看设计：积累素材、设计过程、完稿、文档的整理。有的人做饭快，比如我妈就比我快，后来我发现原因不仅仅是她的手艺比我高超，从菜品的搭配、切菜娴熟度、配料的齐备等等都比我做的好，比我快就是自然而然的事情了。说回设计，想提升设计效率，那就完全可以从积累素材、设计过程、完稿、文档的整理下手。素材积累素材目的与分类方法素材的整理应该很多设计师都有做，当然我也是，我整理素材主要是这样的三个出发点：1. 寻找灵感2. 设计模式、形式参考3. 素材用于设计内容填充我的一位同事的素材库文件夹命名为「弹药库」，我觉得非常贴切，这些素材能在你的设计过程中起很大的作用，寻找灵感、快速搭建 App 框架、找素材等等。人人都可以用板斧，但是还要看你能不能耍的开，先看看素材**如何分类**来提高设计效率：用途一：寻找灵感与参考这个主要是要 ...继续阅读 (9)

昨天面试了一个毕业生。每次我都会以“你有什么问题想问我的”作为面试的最后一个环节 。一来想了解应聘者对我们和整个面试过程还有什么疑惑的，二来也想通过这个问题，再看看应聘者关注什么，是进一步了解对方的机会。所以昨天那位毕业生最后一个问题是：我怎么才能成为一名及格的设计师？出于对应聘者严谨和负责的态度，我跟她确认，你所谓的及格是指哪一级别的标准呢？因为在腾讯，我们是有职业发展体系的，在体系下每一个级别都有不同的评判标准，能力模型都列得蛮详细的。她说是高级以上的，很想知道标准是什么，怎样才能做到。其实每次通道面试，我都会跟大家说，主要的评判点是影响力，在一定的时间要求和绩效要求之下，重要的就是看你在团队和项目里面的影响力啦。而且，晋级评审陈述的关键是，你要讲出来“世界因你而不同的那部分”，因为只有那一部分才是你的价值所在。这样，我们可以拿掉运气部分，看真正的专业实力了。不同的级别，不同的影响力表现，这里不一一展开。前面铺垫了这么多，其实是想分享，除了能力模型里面的要求，关于个人努力部分，怎样做才能成为一名好的设计师。感谢那位同学的提问，让我在短时间内小小总结了一下前面十几年职业生涯里的思考。一、热爱怎样成为一名及格的设计师，我想第一个必要条件是热爱吧。这也是我招人除了颜值以外，非常重要的一个标准。假如你不是对这个领域有充分的热爱，就无法在遇到困难的时候面对和坚持。工作和成长的路上，总是困 ...继续阅读 (8)

最近一年多，我们在设计企业级产品时走了很多的弯路，这些弯路促使我们尝试新的设计方法和思路，每一次尝试我们都发现比之前做的更好。因此我把这些踩过的“坑”分享出来，希望后面的人可以少走弯路。企业级产品（toB）和C端产品不同，在国内，C端产品竞争十分激烈、设计的同质化也比较严重，设计师其实比较难有大的创新。我经常苦恼在收到很多简历作品时很难判断谁更优秀一些，限于产品本身的性质，设计看起来似乎都差不多。而toB的产品在国内近年来有强势的发展，对 to B产品的设计研究，目前在行业内是一个空白。可以肯定的是，由于 to B产品的复杂性及极端性，适用于 to B 产品的设计方法，可以更好的作用于 to C的产品上。比如同样的方法，做 to B 的产品只是勉强够用，而做 toC的产品也许可以轻松的做到“一稿就过”。当然，“一稿就过”不是目的，目的是设计出能够正确体现产品定位、突出强调产品个性、具有创新风格的优秀设计作品。第一个坑：缺乏行业特征第一次设计产品官网时，我们和视觉设计师一起进行了深入的讨论，大家也各自做了竞品分析，主要是研究目前流行的设计风格。之后，两个视觉设计师各自出了一版设计稿，可以说各有千秋，所以最终的设计稿融合了两者的优势。由于当时上面要的很急，所以这稿很快就通过并上线了。几个月后，随着对产品的不断深入了解，大家发现了问题：现有设计太偏C端风格，完全不具有行业特征（因为之前研 ...继续阅读 (9)