深度 | 建立在符号化设计思维下的 UI 设计

最近基于两个问题的思考和自己产品设计的梳理，意识到视觉设计需要强化差异，深化状态识别和记忆，通过构建符号化设计让用户在与图形交互的时候产生本能的、直觉化的效果。这一点，是我最近在UI设计上感触最深的一点。一、那什么是符号化设计？ 首先来看这两个问题。1.为什么Master卡这次VI系统升级，只保留了两个相交叉的红色和黄色圆？ 2.为什么Mac系统上的软件左上角的关闭、最小化

产品 2016年11月21日

用户体验设计中最常见的误解

误解1：所有网页应该要在三次点击内到达三次点击法则长久以来都受到Usability Test(易用性测试)的挑战。研究发现，与这种刻板的印象不同的是，其实用户就算没有在三次点击内找到他们想要的资讯，他们也不会离开。事实上，点击次数并不会影响用户的满意度和成功率。没错，较少的点击并不会让使用者更开心，也不会让他们感觉到更快的完成了某件事情。真正重要的是清楚的导航，沿着使用者的

运营 2016年04月10日

视觉状态识别设计

A：为什么master卡这次VI系统升级，只保留了两个相交叉的红色和黄色圆？就是因为经过长时间的使用，用户已经对品牌形成了很强的视觉识别，就是两个交叉在一起的色块圆，其他都可以忽略； B：mac上的软件打开后左上角都有三个操作：关闭、最小化和全屏；之前版本是关闭icon是：红底+叉号；最小化icon：橙色地+横杠；全屏icon是：绿地+双向箭头；为何后来系统升级默认改为了

产品 2016年11月03日

你够专业吗？一个提升设计师专业度的自查表

最近和某个设计师有段有趣的对话，行走江湖那么久，很多时候我们因为自己多吃了几年饭而觉得自己很senior 。事实上，其他人却好像完全不是这么想…到底该怎么定义 senior 与 junior 呢？许多人认为资深跟资浅的差别是在于脑子是不是比较灵光，比较有创意有想法……我却有不同的想法，凭良心讲，很多时候我觉得 junior 比我们这些老人更有创意，因为没有包袱跟过往经验的束

产品 2016年11月02日

Coffee-Slice, 一个简单的 Sketch 切图插件

这是阿里的朋友自己开发的一个插件，可以帮助你快速的切图，大家可以试试，有任何建议可以在下方留言板留言，谢谢大家！简单切图功能：根据用户给出的目标容器尺寸，自动计算icon的描边属性、宽度，对icon进行缩放、贴边处理。添加切图图层，自动生成基于@1x/@2x/@3x分辨率的成品切图。一键保存功能：生成@1x/@2x/@3x分辨率的成品切图并一键保存到指定路径。简单切图:一键

产品经理 2016年10月09日

好图标的秘密！顶尖设计师分享的6个图标设计优化指南

UI的工作曾经被很多人等同于画图标，然而大家真的会画图标么？优质的图标和不够好的图标的区别其实非常小，但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。少有的icon设计理论结合实践的文章，强烈建议阅读。这6个步骤应该作为一个指南而非教条来准守。这篇文章中我们会将这六个步骤应用到一只柯基犬的图标上。这个图标有潜质，但是还不足以被认

业界 2016年06月01日

当设计一个APP UI的时候我们想什么…

本文作者：血儿    原文链接：猛戳这里有句话说在前面——好看就是生产力，在app中是真实存在的。品牌篇图标篇排版篇微场景篇动画篇交互篇一、品牌篇品牌色从大的来说是VI需要优先考虑的，考虑点如下：品牌色与行业属性之间的关系相对来说不同行业是有其固有的品牌色的，比如机械行业，通常给人的第一意向就是明黄；而科技、互联网企业给人的第一印象就是科技蓝（原谅我用这么俗套的词）等。在对

交互体验 2016年05月30日

深度揭秘！聊聊Instagram 到底为什么要改图标

为什么人们会认为它变得平庸？Instagram 希望成为一个怎样的产品？这个更改其实与设计风格关系不大，而与 Instagram 自身定位和未来计划更有关联。一起来看设计背后的故事。作者：好奇心日报-朱凯麟 胡莹3 年前，苹果推出 iOS 7 ，当时一同席卷互联网的还有“扁平化”设计思潮。短暂争议过后，设计师和创意总监们纷纷朝着“拟物风格”的尸体上吐唾沫，并高呼：“打倒渐变

业界 2016年05月16日

作为设计师，你不应该错过这个图标管理工具

本着凡事多看一眼的原则，我还是去官网了解了一番。也辛亏多去看了一眼，否则我可能会错过这个不错的图标管理工具。首先，Nucleo 图标 icon 管理工具，可以配合 Sketch、PS、AI、XD 来提升整体的操作效率。当设计过程中需要使用 icon 时，只需要从 Nucleo 中拖拽到设计工具（比如 Sketch）中即可。基础功能方面 Nucleo 与 iconjar 并无

产品设计 2016年04月26日

快速上手制作Icon Font

现在在提起Icon Font，已经不是什么新鲜的词汇了，网上已经有很多介绍它的文章，并且很多网站也已经将它用到，本篇主要是将制作Icon Font的整个流程整理一下，并且加入了自己在制作中遇到的问题，使得大家可以在今后使用的时候可以很快上手并且避免这些问题。一、首先要说的是，什么是Icon Font。我认为，我们现在通常所指的Icon Font，是用字体文件取代图片文件，来

Axure教程 2016年04月11日