分类： 体验设计

去年上半年就知道了 Nucleo 这款图标管理工具，跟其它图标管理工具相比，Nucleo 最大的特点是自带 7000+ 个设计精美的图标，并且还有简单实用的编辑功能。当时的个人版有两种价格，49 美金的只提供为期一年的图标更新，而可以永久更新的要 129 美金。当时想要的仅仅是管理图标的功能，对官方提供的图标没有那么强烈的需求，所以觉得价格比 Sketch 还贵不值得就没有入手。

一年多过去，Nucleo 发布了新版，提供的图标数量达到了 20000+，并且价格也做了调整，无论是个人版还是团体版都是永久更新，个人版价格为 99 美金，团体版根据人数多少有几种折扣。刚好设计群里有朋友组织大家一起团购，最终以 138 元人民币的价格收入囊中。

Nucleo 有 Mac 版和 Windows 版客户端供下载，当然还有无需下载但简化了功能的 Web 端。安装后登录自己的账户，大约等待几十秒，官方提供的两万多个图标就下载到了本地。默认有 Google Material Icons 和 Nucleo 两个图标集，你可以随时将自己的图标导入，创建和编辑自己的图标集。 继续阅读

第一步：思考

大家都知道，动手前的有效思考可以降低后期返工几率，从而节省时间。所以最初计划对「爱尚良品」改版时，就想清楚了改版的目的和想要的效果是什么。整理后是这样一个简要的列表：

• 作品展示为主（教程、杂记类的内容放到公众号或发布到其它媒体）；
• 简洁风、去掉评论、突出内容主题和分享功能；
• 两年内不会超过 50 篇内容，所以缩略图的排列布局可以多样化，避免单调；
• 适量的页面效果；

有了清晰的想法就相当于需求明确了，这么简单的网站当然不需要用 Axure 制作原型啦，直接用纸笔画个草图 1 分钟完事：

第二步：设计

因为整站偏简单，所以准备了一个页面跳转的效果来减少单调感。好友 ZWW 帮我完成这个 WP 主题的制作，于是用 Keynote 做了个动效跟他确认技术实现有无问题。这样做的好处是无需太多言语，很直观就能了解我的想法。这个动效从新建文档到导出 gif 文件共花了 3 分钟。

 
看过动效后 ZWW 告诉我说没有太大问题，某些细小的地方可能要折中处理一下，我就打开 Sketch 开始设计了，半小时左右完成设计工作：

第三步：制作

接下来用 Marketch 插件一键输出标注和切图，然后打包发给 ZWW 帮我制作成 WordPress 主题。这个主题虽然设计简单，但是想完美实现效果着实花了一些时间，算是我和 ZWW 合作这么久以来最折腾的一次。第一版的页面切换效果不太流畅，ZWW 又重新优化了代码，反复改了好几次，最终效果跟视频里的不太一样，但我们都觉得太过于追求效果而增加代码复杂度的话不值当，所以就折中处理了。

欢迎大家体验新版的爱尚良品网站：http://isang.me
关于页面里有我们的公众号二维码，喜欢皮具的朋友可以扫码添加，悄悄说一句：「端午节期间有抽奖活动哦」:-)

写博客已有十多年历史了，最开始做 FLY 电子杂志的时候，一些鸡毛蒜皮的小事都想跟大家分享，比如听到一首美妙的歌曲、看到一部好看的电影、杂志下载量突破多少万之类的……后来还发了一些简单的插画、设计类原创教程，以及平时随拍的照片。当时的目的只有一个：让更多的人认识自己，从而结交更多兴趣爱好相同的朋友。

从几年前开始，写博客的频率降低了许多。我常常在想，在这个信息爆炸的时代，如果输出的内容对博客的访问者没有价值的话还不如不要写，所以近几年的博客内容以设计作品展示和设计感悟为主，连摄影类的文章都很少发了（因为摄影水平太低，囧zZ）。

因为写博的次数减少了，所以更加注重每一篇文章的质量，会花更多的时间去塑造内容。而除了专注内容之外，其实自己还一直坚持着一些小小的书写习惯，那就是处理中英文混排的方式（其实往大了说应该是中西文混排 ^_^）。

标点符号

到我这的来访者，应该大部分是设计行业的朋友，不知道大家是否熟悉这样的场景：我们交付给开发的设计稿，最终跟踪还原度的时候却发现中文内容里掺杂了很多半角逗号和句号，对于强迫症患者来说真的要崩溃。其实只要开发的同学稍微有点意识，即使在编码的时候忘记了，在代码发布前来个全局搜索再批量替换就能解决问题了。但我发现现实情况是有很大一部分开发同学不会做这一步的操作──我真的不是在黑开发同学，因为界面里的文字不全是开发同学手打，有些是直接从 PRD 文档或企划文案里复制粘贴的──我也真的不是在黑产品同学和企划同学，囧zZ

空格

平时不管是发邮件写博文还是发朋友圈，避免不了中英文一起出现的情况，有的人喜欢中英文连在一起，有的人随心所欲想连就连想空就空没有规律。而我的个人习惯是：

• 英文前后都有汉字或符号时前后都添加空格；
• 英文在句首时，后面添加空格；
• 英文后面紧跟标点符号时，两者之间不添加空格；

专有名词

对于“ipod”、“iphone”、“IPhone”、“itunes”这样的写法，相信大家都不会感到陌生，在我的印象中，国内知名设计团队的文章里也曾出现过这样的错误写法，虽然我们不能要求七大姑八大姨在 QQ 或微信聊天时使用标准写法，但是作为特定行业里的从业人员，如果在正式场合出现这种错误是很难让人接受的。所以我对自己的要求是任何时候都要注意专有名词的大小写问题，并在条件允许的情况下影响他人。

错别字

我是一名拼音输入法使用者，由于同音字和词组较多，再加上方便智能的“动态词频”功能，很容易就打出错别字，所以写完文章后会进行反复校对，尽量杜绝错别字的产生。如果可以的话，在发布之前让身边的朋友帮忙检查一下是个不错的主意。

良好的书写习惯对作者和读者来说都是一件有益的事，写作无大事，从点滴做起。

上周给组内小伙伴们分享了自己对设计的几个不同阶段的理解，抛砖引玉，希望可以和大家多交流。在一个产品从无到有的过程中，我所认知的设计大致分为以下几个阶段：

1. 需求的挖掘和分析
2. 思维导图
3. 原型设计 & 交互设计
4. 视觉设计
5. 交付
6. 跟踪验收
7. 总结

看到上面的图片，可能大家会问为什么没有竞品分析？当然是有的，但因为竞品分析实际上出现在产品诞生过程中的多个阶段，所以单独拿出来讲。

竞品分析其实是一个很深奥的话题，产品经理在这方面比较专业，很多大牛总结了许多宝贵实用的经验，大家想深入研究的话可以去找找资料。而作为设计师的我们，可以对竞品进行如下几个维度的分析：目标用户、核心功能、UI 设计、交互设计和产品优缺点。《孙子兵法》有云：知己知彼，百战不殆。只有做足了功课，才有利于后面工作的开展：）
继续阅读

从《FLY》电子杂志休刊到现在的这几年时间里，很少在网络上活跃，在各种技术、设计和知识分享交流平台基本处于潜水状态。以前经常逛的中国插画网和蓝色理想网站也很少去了，说起来对大龙哥和蓝色两位大佬感到很愧疚，白混了个论坛版主的头衔却好久没尽责了……

一直潜水的话有个弊端，即使平时有看他人的作品和经验，但因为缺少分享和交流，始终是不利于个人成长的。人是社会动物嘛，怎么少得了社交呢？所以我决定以后还是多冒泡^_^

UI 中国是我这几年经常逛的设计平台之一，一直喜欢她的简约淳朴，即使有少量的广告也比其它网站的补丁式风格更让人容易接受。她就好比一位温文尔雅的姑娘而我又刚好喜欢她，既然真心喜欢就会想着为她做一些事，于是萌发了设计 UI 中国 App 的念头。搜索了一下，发现设计 UI 中国 App 的设友还是蛮多的，看来很多人跟我一样喜欢她^_^

在动手设计之前先对网站做了稍微深入的了解，并回顾了一下自己作为一名设计师在网站内最频繁的使用场景，然后结合了移动互联网的特性，对主要功能模块和信息结构进行梳理和调整。

下面的2张图是 UI 中国网站的主要功能模块和调整后的 App 功能模块，有了思维导图，可以方便自己对即将要做的事有更清晰的理解。
继续阅读