UI设计点滴.pdf
http://www.100md.com
2019年12月26日
 |
| 第1页 |
 |
| 第10页 |
 |
| 第16页 |
 |
| 第25页 |
 |
| 第45页 |
 |
| 第51页 |
参见附件(4541KB，59页)。
UI设计点滴里面包含了很多有关于UI设计行业的专业术语和概念解析，还有该行业的相关岗位，工作职责，职位要求，职位描述等等，帮助用户更好的了解这个行业。
UI设计点滴文章目录
什么是UI设计
UI设计相关岗位
UI设计相关工具
UI 设计资源介绍
计算机操作系统界面发展史
MarkMan作者专访
Design Hackathon 工具手册
从版本升级看产品设计
慢工细设计思考
交互设计师的工作职责
1、参与产品规划构思和创意过程；
2、分析业务需求，并加以分解 归纳出产品人机交互界面需求；
3、设计软件的人机交互界面结构、用户操作流程等；
4、参与公司前瞻性产品的创意设计；
UI设计是什么
Ul是User Interface的缩写，直译为用户界面。很多人认为图形设计或视觉效果制作就是Ul设计，其实这只是Ul设计中很小的一部分内容，即GUl(Graphic user interface)设计的环节。Ul设计的概念很大，也很系统，它分为用户体验(User experience-UX)设计、人机交互设计(Human computer Interaction-HCl)、图形设计(Graphic user interface-GUl)、用可性研究(Usability)、规范制定(UX-Guideline)、甚至涉及到了人体工程学、心理学和商业模式等领域。在UI设计过程中还包含了很多决定性的研究阶段，如场景设计(Scenario)、典型用户设计(Persona)等。UI设计是为用户设计产品过程中一个非常重要的环节，其目的是利用科技手段验证制作出从用户角度出发的产品，提高用户行为效率，提升用户使用体验。
如何操作Design Hackathon?
在Design Hackathon开始之前，我们需要先做一些准备工作，包括场地、人数和纸笔的准备。
1、人数：Design Hackathon的参与人数以8-15人为宜，产品设计师、视觉设计师甚至工程师等所有与产品相关的人员都可以参加；
2、场地：场地需要容纳5-7组桌椅(因为在[方案设计]环节，所有人需要被分为5-7组)，能保证每组成员都无障碍地写纸条和绘制线框图；
3、物料：每位参加者需要配备1支马克笔，至少1支绘图铅笔，至少1本记事贴或N次贴，3-5张A3白纸。场地内还需要有一块大的白板or白墙(需要能容纳100-200张记事贴)。PPT和幻灯设备根据情况选择；
4、Design Hackathon整场需要1位主持人，主持人只负责引导和组织，原则上不提供任何关于产品的主观导向。
UI设计点滴截图
UI 设计点滴
吴启文 产品设计师
Email: hanyan51@gmail.com
Tel: 18602123593
UI 设计点滴
2
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
目录
什么是 UI 设计 .............................................................................................................................. 3
UI 设计相关岗位 ............................................................................................................................ 5
UI 设计相关工具 .......................................................................................................................... 10
UI 设计资源介绍 .......................................................................................................................... 17
计算机操作系统界面发展史 ......................................................................................................... 19
MarkMan 作者专访 .................................................................................................................... 36
Design Hackathon 工具手册 .................................................................................................... 43
从版本升级看产品设计 ................................................................................................................. 48
[慢工细活]设计思考 ...................................................................................................................... 54
UI 设计点滴
3
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
什么是 UI 设计
UI 是 User Interface 的缩写，直译为用户界面。很多人认为图形设计或视觉效果制作就是 UI
设计，其实这只是 UI 设计中很小的一部分内容，即 GUI(Graphic user interface) 设计的环
节。UI 设计的概念很大，也很系统，它分为用户体验(User experience-UX)设计、人机交互设
计(Human computer Interaction-HCI)、图形设计(Graphic user interface-GUI)、用可性研究
(Usability)、规范制定(UX-Guideline)、甚至涉及到了人体工程学、心理学和商业模式等领域。
在 UI 设计过程中还包含了很多决定性的研究阶段，如场景设计(Scenario)、典型用户设计
(Persona) 等。
UI 设计是为用户设计产品过程中一个非常重要的环节，其目的是利用科技手段验证制作出
从用户角度出发的产品，提高用户行为效率，提升用户使用体验。
什么是用户体验(User experience-UX)
总的来说，用户在使用产品过程中产生的互动体验统称为用户体验，这是一个很宽泛的概念，可以从很多角度切入，如产品的可用性、易用性，品牌与产品的契合度等。
用户体验的研究牵涉到了产品从前期到后期的诸多环节。从最初的产品策划开始，UX 部门
(也称 UE 部)就需要配合完善产品的商业模式、用户调研、提炼典型用户、产品情景设计、分析产品的生活样式(lifestyle)、提炼产品的视觉识别、质感识别等。后期要提出解决方案、制作配合、数据反馈、用户跟踪及市场跟踪等，最后根据以上所有步骤的研究结果制作出相
应的规范(UX-Guideline)。
什么是交互设计(Interaction Design)
交互设计是指设计师对产品与它的使用者之间的互动机制进行分析、预测、定义、规划、描
述和探索的过程。简单的说，即设计和定义使用者如何使用一产品达到其目标，完成某一任
务的过程。它致力于了解目标用户及他们的需求，了解用户在同产品交互时的行为特征，了
解“人”本身的心理特点。
交互设计作为一门关注交互体验的学科在二十世纪八十年代就产生了，它由IDEO 的一位创
始人比尔· 莫格里奇在1984 年一次设计会议上提出，他一开始给它命名为 “软面(Soft Face)”，由于这个名字容易让人联想到当里流行的玩具“椰菜娃娃(Cabbage Patch doll)”，后来他把它
命名为Interaction Design。
交互设计的目的是使用户在使用产品过程中保持愉悦，有效地完成目标。因此，人的因素应
作为设计的核心被体现出来。
一般而言，交互设计师都遵循类似的步骤进行设计，为特定的设计问题提供某个解决方案(没
有绝对正确的方案)。设计流程的关键是快速迭代，快速建立原型，通过用户测试改进设计
方案。各步骤的要点如下：
1. 用户调研：通过用户研究的手段(介入观察、非介入观察、采访等)，交互设计师调查了
解用户及其相关的使用场景，以使对其有深刻的认识(主要包括用户使用时的心理模式和行
为模式)，从而为后续设计提供良好的依据。 UI 设计点滴
4
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2. 概念设计：通过综合考虑用户调研的结果、技术可行性、以及商业机会，交互设计师为
设计的目标创建概念(目标可能是新的软件、产品、服务或者系统)。整个过程可能来回迭
代多次，其中包含了多次头脑风暴、细化概念模型等活动。
3. 创建用户模型：基于用户调研得到的用户行为模式，设计师创建场景或者用户故事
(Storyboard)来描绘设计中产品将来可能的形态。通常，典型用户设计(Persona)会作为创建场
景的基础。
4. 创建界面流程：交互设计师通常采用 Wireframe(线框图)来描述设计对象的功能和行
为。在 Wireframe 中，采用分页或分屏(包含相关部分的注解)的方式来描述设计对象的
细节及操作流程。
5. 开发原型及用户测试：交互设计师通过设计原型来测试设计方案。原型可以是实物的，也可以是计算机模拟的，可以是高保真，也可以是低精度的。
交互设计是一门具体独特方法和实践的学科，涉及到了研究、实验、制作、测试等环节，需
要与多领域多背景的人员沟通，可以从传统设计、人机工程学、心理学、数据分析等领域汲
取理念和技术，不断完善，以此作为设计的依据。
什么是图形界面(Graphic user interface-GUI)
在人与机器互动的过程中，有一个层面，即我们所说的用户界面，它可分为视觉、触觉、听
觉等方面，甚至上升到了情感层次。平时大家常见的有计算机操作系统界面(Windows、Mac
OX)，手机操作系统界面(iOS、android、windows mobile)。
其它名词解释
UCD(User Centered Design)
以用户为中心的设计，简单的说，在进行产品设计时从用户的需求和感受出发，围绕用户为
中心设计产品，无论产品的使用流程、信息架构、人机交互方式等，都需要考虑用户的使用
习惯、预期的交互方式、视觉感受等方面。
衡量一个好的以用户为中心的产品设计，可以有以下几个纬度：产品在特定使用环境下为特
定用户用于特定用途时所具有的时效性、效率和用户主观满意度，延伸开来还包括对特定用
户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时整体的心感受等。
Information architecture(IA)
信息架构，它主要是将信息变成一个经过组织、归类、以及具有浏览体系的组合结构，处理
好信息与使用者需求的过程。如我们在设计一个网站的过程中，就需要对网站所传达的信息
进行系统的思考，包含了网站导航、页面布局、内容展示、操作流程等。
Usability
易用性，它指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用
户能否用产品完成他的任务，效率如何，主观感受怎样，它是交互式产品的重要质量指标。
UI 设计点滴
5
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计相关岗位
一般从事互联网产品研发(网站、软件、应用等)的公司，到了一定规模后都会成立 UI 设
计部，满足不断增加的设计需求。这个部门会设立几个工作岗位，各公司在职位上的称呼可
能会有点区别，但基本职责都是差不多的。现在我们就来对比下国内各公司的招聘要求，看
看都需要具备些什么样的能力。
豆瓣
用户研究员
职位描述:
1. 进行易用性和功能分析,对产品原型进行评测
2. 主持用户观察、深入访谈、焦点小组
3. 分析市场需求、对其他产品进行设计分析
职位要求:
1. 能分析使用者的使用习惯、经验和情感
2. 能评估可用性,并转化为具体的改良建议
3. 有很好的倾听、沟通,能跨团队协作
优先条件:
设计、人机交互、心理学教育背景者
交互设计师
职位描述:
1. 和设计、产品、开发团队一起参与前期概念设计,制作故事板、产品原型
2. 根据具体的产品概念,设计功能、流程与架构
3. 提供设计评估,检阅 ui设计,提出建设性的修改建议
职位要求:
1. 熟悉好的交互模型、信息架构
2. 能发展容易使用的使用界面
3. 能提出变通的解决方案
4. 清楚使用者所处的真实环境
5. 有直接、快速的沟通能力,善于合作
6. 简历请附作品(张数不限)
优先条件:
1. 设计、人机交互、心理学教育背景
2. 具有设计可用性web界面的丰富经验者
视觉设计师
职位描述:
1. 为豆瓣新的或已有的产品和功能确立视觉部分 UI 设计点滴
6
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2. 把握设计趋势,提出新的设计及创意策略
3. 有效的平衡网站易用性和美观性
职位要求:
1. 好的视觉感觉
2. 善于用视觉来表达想法
3. 有一遍又一遍观察你的设计的耐心
4. 能感知使用者所看到的
5. 善于沟通,能和团队紧密协作
6. 简历请附作品(张数不限)
优先条件:
1. 美术、设计教育背景者
2. 好的手绘功底者
3. 热爱生活者
小米
UIUE 设计
任职条件
1、本科学位以上，2-5年工作经验；
2、有较强的产品逻辑和文档能力，工业设计或人机工程相关专业背景优先。
视觉设计师-小米电视
岗位职责：
1. 带领团队完成日常的设计工作；
2. 敏锐的行业设计动态与发展方向把控能力；
3. 准确把握产品设计风格，并升级迭代，控制相关创意工作的出品质量，领导团队完成优
秀的设计作品；
岗位要求：
1. 不少于五年平面设计经验或者三年以上终端设备设计经验；
2. 优秀的审美能力，在交互和用户研究方面有一定经验和见解，对可用性有一定认识，有
丰富的设计理论知识和对流行元素敏锐的观察和总结能力；
3. 良好的合作态度及团队精神，善于沟通，富有工作激情及责任感，理解工程师思维，4. 具备和开发工程师愉快的协同工作经验；
5. 掌握常用等设计软件；
豌豆荚
产品设计师
豌豆实验室拥有一个小而精的产品设计师团队，专注于为用户创造简单好用的移动产品。作
为产品设计师，你将参与到产品开发过程中的每个环节，从早期概念探索到发布前像素级别
的问题修正。你将在工作中运用和学习到产品设计、交互设计、视觉设计、用户研究等方面 UI 设计点滴
7
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
的知识和技能。你将成为豌豆实验室一个或多个产品的负责人。
主要职责：
将概念性的想法转化成对用户富有价值的产品
全面负责产品的整个生命周期，从概念到发布的完整用户体验
为产品设计简单优雅的流程和体验
带领不同团队，建造出你心目中的完美产品
参与公司产品战略制定
参与设计评审，和其它设计师一起不断提高我们的设计质量
职位要求：
对复杂事物和系统的洞察力
对视觉和交互细节的高度注意力
对互联网产品策略和愿景的深度思考
有交互设计项目经验，尤其是面向大众用户的大型产品设计经验
对用户体验各专业领域的知识和经验积累
优秀的书面或口头表达能力 (你需要带领团队做出你理想的产品)
够用的原型制作能力
适应快速变化的工作环境
好品味
有能力建造自己设计的东西尤佳
资深视觉设计师
豌豆实验室正在寻找一名资深的视觉设计师，负责定义豌豆实验室所有产品，包括 Windows
版、Android 版、Web 产品的视觉呈现。
主要职责：
全面负责豌豆实验室所有消费者产品的视觉设计工作
为豌豆实验室各产品创造一致的、愉悦的、优雅的视觉体验
职位要求：
交互设计、图形设计、工业设计或其他设计专业领域的学习经历
至少三年工作经验，曾经作为团队核心成员设计出卓越的消费者产品
拥有从零开始，为一个或者多个产品制定视觉设计规范和系统的能力
提供一个 Web-based 的作品集(包括早期探索尤佳)
有能力制定面向消费者产品的设计规范
懂 HTML 和 CSS 尤佳
卓越的设计沟通技巧
腾讯CDC
用户研究工程师
职位要求：
1、人机交互、认知心理学、计算机、设计艺术或相关专业本科以上学历 UI 设计点滴
8
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2、熟悉研究方法论，熟悉一般研究步骤，了解各种研究方法，有坚实的统计和数据分析基
础
3、具有商业头脑，能针对不同项目有效权衡和分配时间，权衡研究投入和收益比率，高效
完成研究
4、较强的沟通能力，能与其他研究员，不同职能的团队协作
5、对互联网行业热情，对业内消息敏感，对市场研究有一定了解
6、良好的英文文章阅读能力，能阅读专业论文，推荐英语6级
工作职责：
1、产品可用性测试
设计体验测试方法，完成计划，进行测试工作和完成报告，给出产品改进建议。
2、用户研究
设计实施各种用户研究，统计分析各种用户体验数据报告，挖掘用户需求及产品使用习惯，建立用户模型；
参与公司前瞻性产品的规划，分析用户需求。
3、体验满意度监测
建立产品满意度指标；跟踪和监督公司产品用户体验满意度改进，提升产品设计质量
交互设计师
职位要求：
1、对各种常用软件有强烈兴趣并有灵敏触觉，富有创造力和激情，并有动手实践的良好习
惯
2、强逻辑思维能力，熟练掌握业务需求分析、产品需求分解的技巧
3、主动性高，具优秀的理解、沟通与协调能力，很强的文字表达能力
4、对电子商务网站和 IM等互联网产品有深入体验经验和理解
5、有一定视觉设计和XHTMLCSS等相关岗位的技术和技能
6、个性乐观开朗，善于和各种背景的人合作
7、有良好的英语阅读能力
8、有大局观，可以在复杂的约束条件下找到平衡或创新的方法
9、对交互设计过程有深入的了解，可以独立完成整个设计过程(对流程图、线框图等等交
互设计方法能熟练应用)
10、工业设计、计算机、心理学、平面设计、广告设计等相关专业本科以上学历
11、如果前9条有足够的资历和资质，请忽略第10条
工作职责：
1、参与产品规划构思和创意过程
2、分析业务需求，并加以分解 归纳出产品人机交互界面需求
3、设计软件的人机交互界面结构、用户操作流程等
4、参与公司前瞻性产品的创意设计
高级视觉设计师
职位要求：
1、本科及以上学历，美术、设计或相关专业本科以上学历(优秀人才，专业和学历可适当放
宽) UI 设计点滴
9
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2、从事设计行业工作 3 年以上，对工具型网站的设计有丰富经验、有成功案例(同时有手
持成功案例的更佳)，对视觉用户研究有一定经验和见解
3、具有深厚的设计理论与娴熟的设计技巧，善于捕捉流行趋势，并能推动团队的设计能力
4、热爱设计，拥有宽广的行业(平面设计、互联网、手持应用)视野与时尚的审美标准
5、具备良好合作态度及团队精神，并富有工作激情、创新欲望和责任感，能承受高强度的
工作压力
工作职责：
1、负责参与产品(网页、手持方向)的前期视觉用户研究、设计流行趋势分析，主导设定
整体视觉风格和VI设计
2、负责日常的运营活动及功能维护提供美术支持
3、负责参与设计体验、流程的制定和规范
4、负责分享设计经验、推动提高团队的设计能力
少年，看了这些招聘岗位及要求，你知道自己在哪个位置了吗，如果想去你心目中的好公司，那就为之努力吧。
UI 设计点滴
10
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计相关工具
工欲善其事，必先利其器。了解到了UI 设计相关工作岗位的任职要求后，我们可以就其中
所涉及到的工具做进一步的了解，之后无论是在原型设计上，还是视觉设计上，选择适合自
己并能与团队很好沟通配合的工具，做到事半功倍。
1. 原型设计工具
Power Point(PPT)
PPT 在很多人的印象中就是制作幻灯片的工具，但它在某些交互设计师的手下却是制作原型
的利器。毕业后工作的第一家公司里，交互设计师用 PPT 制作出了艺术级的交互流程图，开发和测试都按照这个流程来工作就行。当时设计的是一款电阻触屏直板手机，内部代号为
HaiLing，分享几张截图。
3.1 版本历史
3_2 硬件定义 UI 设计点滴
11
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_3 开机
3_4 主界面及状态栏
Microsoft Office Visio
它是微软办公套件中的一款，主要用于各种图表的制作，内有很多现成的控件，也可以自定
义图形。我一般都是自己画图形，满足自己的审美需求。下面是用 Visio 绘制的交互图： UI 设计点滴
12
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_5 登录注册
UI 设计点滴
13
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_6 浏览查看
Axure RP
Axure RP 是一款专业的原型设计工具，能够快速制作出网站的线框图、流程图等，并进行
相应的交互。最新版中还加入了手机、平板的设计模块，极大地满足了产品经理、交互设计
师的工作需求。
UI 设计点滴
14
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
Balsamiq Mockups
Balsamiq Mockups出自加利福尼亚州的 Balsamiq工作室，创始人 Peldi在2008年 6月推出了
这款手绘风格的产品原型设计工具， 之后迅速成为产品设计师绘制线框图或产品原型图的利
器，最新版本中有 77 个定义好的控件，无论你是设计桌面应用、Web 应用还是手机应用，它都能提供相应的支持。 UI 设计点滴
15
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_9 Desktop Apps
3_10 77 Built-In Controls UI 设计点滴
16
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
纸和笔
在各原型设计工具中，纸和笔其实是最重要的，它能够让你随时记录灵感，并把想法快速表
现出来，向他人展示，面对面的沟通，实时修改。
以上介绍的都是大家常用到的原型设计工具，一些小众的没有涉及到，如果有兴趣，Google
上输入“原型设计工具”就可以搜索出很多。下面我们介绍一些视觉设计相关的工具。
2. 视觉设计工具
Photoshop、Illustrator
这是 Adobe 旗下最著名的两款图形设计软件了，Photoshop 绝对是视觉设计的主力军，市
面上相关的教程书籍可以用汗牛充栋来形容了。 Illustrator 在 UI 设计中常用于图标的绘制，很多设计师都为画出很棒的写实图标而在此软件上下了一番功夫。
Flash、After Effects
Flash 早已过了全民闪客的年代，但在 UI 设计领域，它还被常用于动态效果的演示制作。
After Effects 为人熟知是在影视后期制作领域，但在 UI 设计里，为了向他人演示设计师所
构思的交互，After Effects 被光荣地引入。
3D Max、Maya、Zbrush
这三款都是 Autodesk 旗下著名的三维软件，用于建筑、动画、CG 创作等领域。在视觉设
计师的手下，它们是制作 3D 图标的利器，特别是 Zbrush，它可以让你在屏幕前进行雕刻，生动地刻画出图标的细节。
3. 思维导图工具
Mindjet MindManager
这是一款优秀的思维导图和知识管理工具，能够帮助你将想法和灵感以清晰的思维导图的形
式记录下来，这对梳理工作计划和规划很有帮助，广泛应用于研究、组织、解决问题和决策
中。在 UI 设计环节，我们可以用它来很好地整理产品需求、划分结构、建立菜单树等。
4. 标注工具
MarkMan-马克鳗
它是一款设计稿标注、测量神器，可以横向、垂直标注和测量元素的长度，自动读取标记所
指的元素的色值，标记某点的位置，甚至直接在上面添加文字说明。
UI 设计点滴
17
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计资源介绍
UI 设计已经发展了一段时间，这期间也积累了许多可供学习的资源，下面就介绍一些个人
在学习过程中所看到的资料。
设计规范文档
iOS Human Interface Guidelines
iOS 人机界面设计指南是苹果官方为开发者和设计师准备的一套规范文档，包含了详细的设
计原理、UI 元素、图标和界面设计要求等。它是 UI 设计师或开发者开发应用的必备文档，从可以从苹果开发者网站上下载英文版，也有国内的团队进行了翻译。
https:developer.apple.com
Android Design
这是 Google 为Android 开发者和设计师制定的一套规范文档，经过了数过版本的更新，现
在已经越来越人性化了，同样可以从Android 开发者社区下载。
http:developer.android.comdesignindex.html
User Experience Design Guidelines for Windows Phone
这是微软为 Windows Phone 出的一套设计规范，详细地说明了他们的设计语言，与 iOS 及
Android 对比起来阅读，发现它们的相同点与不同点，思考为什么这样设计，这对于个人
UI设计的提高是很有帮助的。
http:msdn.microsoft.comen-uslibraryhh202915(v=VS.92).aspx
相关书籍
设计心理学 Donald Norman 著
很早以前就出版的书籍，里面介绍的一些方法可能有点过时了，但它可以培养读者有设计心
理的意识，知道处处留心。
世界现代设计史 王受之著
本书对世界现代设计史的源流、发展及现状进行通论式的阐述，描述世界现代设计史上的各
个时期重要流派、重要人物、重要作品，展现世界现代设计史的基本轮廓、构建基本框架。
用户体验要素 Jesse James Garrett 著
本书用清晰的说明和生动的图形分析了以用户为中心的设计方法(UCD)来进行网站设计的
复杂内涵，并关注于思路而不是工具或技术，从而使你的网站具备高质量体验的流程。
中国字体设计人：一字一生 廖洁连著
这本书从历史的角度解读了印刷字体，从形制、体制到印制的演进过程，以及对中国文化、经济、科技和人们生活产生的影响。还可以了解到一九四九年来中国政府对文字改革和字体
设计的关注与投入，及全国仅有的做字单位 “一所三厂”不断尝试改革的成功与失败。 本书
更专业地陈述字体设计的艺术规律和知识，让读者认识到字体设计人，以及他们从事的艺术
活动的价值，认知到文字的审美和功能应用，使人们对汉字之美有全新的理解。 通过对这
十几位字体设计师的采访纪实，我们可以看到他们作为个人，映衬出新中国印刷字体发展进
程的历史轨迹。读过此书，才懂得感激文字，敬畏文字! UI 设计点滴
18
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
浪潮之颠 吴军著
从一百年前算起，ATT 公司、IBM 公司、苹果公司、英特尔公司、微软公司、思科公司、雅虎公司和 Google 公司都先后被幸运地推到了浪尖。虽然，它们来自不同的领域，中间有
些已经衰落或正在衰落，但是它们都极度辉煌过。本书系统地介绍了这些公司成功的本质原
因及科技工业一百多年的发展。
相关网站
www.dribbble.com
www.behance.net
www.pixeden.com
www.smashingmagazine.com
www.uiparade.com
www.pinterest.com
www.huaban.com
www.lovelyui.com
www.pttrns.com
www.mobileawesomeness.com
www.500px.com
www.uisdc.com
UI 设计点滴
19
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
计算机操作系统界面发展史
图形用户界面的发展从来都是与计算机操作系统的更新密不可分的，它们就像一对两小无猜
的朋友，相互依偎着成长，不断散发出迷人的光彩，在不知不觉中影响着人们的工作与生活。
细细数来，从1973 年第一代图形用户界面的呱呱落地到今天百家争鸣，图形用户界面已经
走过了 40 几年的发展历程，步入不惑之年的它更加成熟稳健，带给我们更丰富的体验，为
我们提供了更加人性化的服务。现在就让我们以时间为主线，坐上时光机，一起聆听图形用
户界面这位朋友所谱写的光阴的故事。
1973
1973 年 4 月，Xerox PARC (施乐公司帕洛阿尔托研究中心)研发出了第一台使用 Alto 操作
系统的个人电脑，Alto 首次将所有的元素都集中到现代图形用户界面中，它相当小，但却
有着强大的处理图像信息和分享信息的能力，拥有“所见即所得”的文档编辑器，内置了大
量的字体和文字格式。另外，Xerox PARC还开发了一种名为 Smalltalk的程序语言和环境，它拥有自己的 GUI 环 境 ( 包 括 了 弹 出 菜 单 、 视 窗 、 图 标 )。
4_1 Alto
很长一段时间内，图形用户界面的火种都保存在 Xerox PARC 这个神殿内，不为外界所知，但它在等待，等待着那个盖世英雄身被金甲圣衣，脚踏七彩祥云来迎娶它。
1981 UI 设计点滴
20
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1981年 6月，Xerox推出了 Star，Star于1977年开始研发，它延续了 Alto的概念，在硬
件上做了一些升级，384KB 内存(可扩展到1.5M)，1024768的黑白分辨率，两个按键的鼠
标(原来是 3 个按键)，最重要的是拥有桌面软件，支持多语言，能够连接文件服务器、邮
件服务器和打印服务器。可惜的是，Xerox Star 是一个完全封闭的系统，不允许人们应用
系统之外的其它程序语言和开发环境，这也意味着它不支持第三方软件。
4_2 Star
1983
火种终于等到了它的盖世英雄。1983 年 1 月，苹果公司发布了 Lisa 办公系统，结合 Lisa
硬件、操作系统、办公软件，苹果公司设计出了一款强大的文件处理工作站。它最大的亮点
是支持3.5英寸的软盘，能够最小化、关闭窗口，复制文件等。这其中有个有趣的故事，当
年史蒂夫乔布斯在参观 PARC时看到了运行于Alto的Smalltalk，他是个有心人，回去之后
就抓紧开发出了更健全的系统，不仅拥有Smalltalk 的GUI环境，还增加了下拉菜单、桌面
拖曳、工具条、苹果系统菜单和非常先进的复制粘贴功能。
4_3 Lisa
1984 UI 设计点滴
21
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1984年苹果公司乘胜追击，发布了 Macintosh，它已经有了现代操作系统的一些特点，当插
入磁盘时可以直接在桌面上看到，方便存取文件。双击磁盘图标，打开一个文件窗口，同时
伴随着缩放效果。文件和文件夹都可以被拖曳到桌面上，还可以通过拖曳来拷贝或移动文件。
默认状态下文件夹以图标方式查看，它还可以根据文件大小、名字、类型或日期来排序，通
过点击图标下面的名字，我们可以输入新的名称来对文件重命名。
4_4 Macintosh
1985
1985年注定是不平凡的一年，Amiga一经发布就引领时代，它包括了高色彩图形、立体声、多任务运行等特点，这使得它是一款极好的适合多媒体应用和游戏的机器。
4_5 Amiga
同年8月，微软的Windows Version 1.0终于杀将出来，为这激烈的竞争市场增添了几分火 UI 设计点滴
22
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
药味。它可以在一个窗口中同时运作几个Dos程序，在一个对话框中呈现选项按钮、复选框、文本框和命令按钮，记事本上甚至可以显示文本缓存中还有多少空间剩余。
4_6 Windows Version 1
1986
1986年苹果公司状告 Digital Research，因为 GEM桌面系统实在太像苹果公司的 Macintosh
了，为了应对苹果公司的官司，Digital Research消弱了桌面程序，GEM中最大的变化是拥
有了两个文件窗口，不再有桌面图标，窗口大小也不能缩放，”Desktop”菜单放置在了右
边，两个窗口可以相互独立地浏览文件，要回到另一个窗口只需单击文件夹的系统框。
4_7 GEM
1987 UI 设计点滴
23
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1987年4月，苹果公司发布了 Apple Macintosh II，第一代彩色Macintosh，拥有 24位可
用颜色样本。
4_8 Macintosh II
同年，三年磨一剑的微软发布了 Windows 2.0版本，它采用了 386增强模式，允许使用超过
640K的内存，在窗口管理上有了显著的提高，可以自由重叠窗口，在屏幕上自由地缩放和
移动窗口，甚至最大化或最小化。
4_9 Windows 2.0
1988 UI 设计点滴
24
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1988年9月，苹果公司发布了 GSOS，一个16位的操作系统，它在屏幕顶部有一条单独的
菜单栏。
4_10 GSOS
10月，NeXT计算机发布。NeXT是由苹果公司的创办人史蒂夫?乔布斯，于 1985 年被苹果公
司辞退后同年成立的。NeXT计算机是工业设计者的一个重大胜利，未来主义的 black cube
和高分辨率的显示器，一个图形界面和一个叫作NeXTStep 的操作系统。1996年，苹果公司
买下了NeXT并把Jobs 请回苹果帮助运营公司。
4_11 NeXTStep
1990 UI 设计点滴
25
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1990年5月，微软发布了Windows 3.0，这一时候，他终于意识到了图形用户界面的的无限
潜力，并着手进行了较大的改进。命令按钮和窗口控制条有 3D效果，操作系统本身支持标
准模式，以及使用了超过 640KB内存和硬盘的386增强模式，从而能使分辨率更高，图形显
示更好。
4_12 Windows 3.0
1991
1991年，Mac OS version 7.0 发布，它是一款支持色彩的Mac OS图形用户界面，图标增加
了隐约的灰色，蓝色和黄色阴影。
4_13 Mac OS version 7.0
1992 UI 设计点滴
26
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1992年3月，微软发布了Windows 3.1，这一版的Windows预装了TrueType字体。这首次
使Windows成为可以用于印刷的操作系统。早先，实现这种功能的唯一办法是在 Windows 3.0
中安装Adobe的字体管理器。该版本同时包括一个名为 Hotdog Stand的配色方案，包含亮
红色，黄色和黑色。该色彩方案主要是为了帮助一些患有一定程度色盲的用户，使其更容易
看清楚屏幕上的字体和图形。
4_14 Windows 3.1
1995
1995年8月24日，微软发布了 Windows 95，对图形用户界面进行了重新设计，首次在每一
个窗口上都添加了小小的关闭按钮。设计团队为图标和图形设计了各种状态(启用，禁用，选定，停止等)，著名的“开始”按钮也首次出现。这对于微软操作系统本身和统一的图形
用户界面而言，都是一个巨大的进步。
4_15 Windows 95
1996 UI 设计点滴
27
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1996年IBM发布了OS2 Warp 4，它为这位蓝色巨人挣足了面子。你可以随意创建文件或文
件夹，有一个类似于Windows 回收站和Mac OS的垃圾桶的碎纸机。每一个文件夹都可以设
置单独的背景，背景可以在中间、平铺或自适应窗口的大小，文字和背景都可以改变颜色来
增加阅读性。
4_16 Warp 4
1997
1997年7月，Mac OS 8破茧而出，这距史蒂夫?乔布斯 1996年重回苹果公司时只过去了 1
年的时间，苹果公司重燃战火，两周之内卖出了1.25 亿份拷贝，成为当时最畅销的软件。
Mac OS 8也允许用户设置背景图片，而不仅仅是单一的黑白样式，用户甚至可以从他们的
文件夹中选择图片来进行设置。
4_17 Mac OS 8
1998 UI 设计点滴
28
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1998年6月25日，微软发布了 Windows 98 ，IE浏览器代替了Windows shell，桌面右边
放置了广告，界面允许使用超过 256色来渲染， Windows 资源管理器几乎完全改变，同时“活
动桌面”也首次出现。可是，经过了 13年的发展，Windows的记事本还是不能编辑超过 60K
字节的文本文件。
4_18 Windows 98
7月12日，KDE 1.0发布，KDE 是为UNIX开发的一个网络公开的桌面环境。KDE希望通过提
供一个与MacOS和Windows95NT类似的桌面，填补Unix对更易于使用的桌面操作系统需求。
它是一个完全自由开放的计算机平台，任何人可以自由使用或修改其源代码。
4_19 KDE 1.0
1999 UI 设计点滴
29
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1999年3月3日，GNOME 1.0 发布，它主要是为红帽 Linux和以后的其它Linux 系统开发
的。屏幕底部的面板上排列了常用的程序图标、一排窗口列表和时钟。
4_20 GNOME 1.0
2000
2000年1月5日，苹果公司宣布他们设计出了全新的Aqua界面，并将用于公司新推出的MacOS
X操作系统中。在此界面中，默认的32 x 32和 48 x 48 的图标被更大的128 x 128平滑的
半透明图标取代。Dock上放置了常用的程序图标，鼠标经过时会显示程序名称。当窗口最
小化后，在Dock上显示的不是程序图标，而是程序窗口的缩略图。Aqua界面最大的变化是
涉及到了渐变、背景样式、动画和透明度的应用，有着更好的用户体验。
4_21 Aqua
而此时的微软正在 Windows Me 和 Windows 2000 中挣扎，在图形用户界面上没有太大的突 UI 设计点滴
30
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
破。
2001
2001年10月25日，微软终于不甘示弱地发布了拥有全新用户界面的 Windows XP，该界面
支持更换皮肤，用户可以改变整个界面的外观和感觉，默认图标为48 x 48，支持数百万种
颜色。
4_22 Windows XP
2002
2002年，KDE3.0发布，相比于 KDE 1.0版本，KDE桌面环境有了显著的提高，所有的图形
和图标都更加的完善，拥有了更统一的用户体验。
4_23 KDE 3.0
UI 设计点滴
31
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2003-2007
这几年里，从外界看来，微软一直都在维护 Windows XP、Windows XP Professional 的更
新，在界面变革上没有太多的动作。苹果则开始了对 Mac OS X 的一系列升级，并且都以猫
科动物的名字来命名，在界面设计上不断优化，一次次引领时代潮流。
2007
2007年1月30日，经过了漫长的等待，微软终于揭开了 Windows Vista的神秘面纱。这款
操作系统是微软为了应对其竞争对手而发布的，包含了很多 3D效果和动画。自 Windows 98
以来，微软一直试图改善其桌面，在Windows Vista中，微软用了桌面小工具取代了活动桌
面。
4_24 Windows Vista
同样是在这一年，苹果公司发布了第6代 Mac OS X操作系统Mac OS X Leopard ，再一次
改进了用户界面。基本的界面仍为 Aqua和水晶滚动条，加入了一些铂灰色和蓝色，3D dock
和更多的动画及交互使得新界面看上去有着更丰富的 3D效果。 UI 设计点滴
32
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
4_25 Mac OS X Leopard
2008
2008年GNOME升级到了 2.24版本，它在主题和艺术性投入了大量的精力，其目标是“使电
脑看起来更完美”。
4_26 GNOME 2.24
2009
KDE在2008年1月升级到4.0版本后高歌猛进，于 2009年3 月发布了KDE V4.2。这一版本
在图形界面上加入了很多新的东西，如动画，平滑，高效的窗口管理和对桌面小工具的支持。
图标更为逼真，大小也很容易调整，几乎可以随意配置每一个设计元素。最明显的变化在于 UI 设计点滴
33
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
增加了一些新的图标，主题和声音，这些都是由Oxygen Project提供的。相比于早期的版
本，这绝对是一个巨大的飞跃，而且现在它还可以在 Windows和 Mac OS X上运行。
4_27 KDE 4.2
2009年10月23日Windows 7 全球同步上市，它拥有非常简单、快捷、吸引人的特性。具
体表现为，高效快捷的方法查找和管理文件，例如Jump List和改进的任务栏预览，提高工
作效率；快捷、可靠的性能，意味着电脑使您得心应手；更多功能(如 Windows 媒体中心和
Windows触控功能 ) ，使很多流行数字化应用成为可能。
4_28 Windows 7
2010
2010年10月，代号为“Lion”的Mac OS 10.7首次公开，它将 Expose、 Dashboard 与 Spaces
的功能整合而成的“Mission Control”，在iPad和iPhone上面常见的“ App Store”也 UI 设计点滴
34
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
加进来了，此外软件终于可以全屏运行了。从Lion系统开始，苹果逐渐将iOS 上面的成熟
经验软件、以及新的软件管理启动接口“Launchpad”。此外， Lion 是自从苹果发布 iPhone
以来，第一次将 iOS 上的使用经验转移回 Mac 平台上的尝试。
4_29 Mac OS Lion
2012
2012 年微软公司推出了 Windows 8，采用了全新的 Metro 风格，除了适用于笔记本电脑和
台式机平台的传统窗口系统显示方式外，还特别强化了适用于触控屏幕的平板电脑设计，吹
响了反击 iOS 和 Android 的号角。
UI 设计点滴
35
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
4_30 Windows 8
同年，苹果发布了Mac OS X Mountain Lion，更多地引入了 iOS 的功能特色。
4_31 Mac OS X Mountain Lion
2013
苹果于2013年6月10 日公布了OS X Mavericks，并在 2013年10月22 日起。从
这个版本起，苹果公司不再以大型猫科动物来为其操作系统命名，改为采用美国加州的地名，“Mavericks”一名来自加州一个同名的冲浪地点。
4_32 OS X Mavericks
UI 设计点滴
36
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
MarkMan 作者专访
受访：陆文进 采访整理：吴启文
编者按：在写[UI 设计相关工具]这篇文章时，介绍了设计标注工具 MarkMan，在网上搜寻
作者的相关信息，少之又少，于是动了采访作者的念头，邮件联系之后，我发现了一个很有
意思的人，看到软件作者背后的小小世界。当然个人不太同意文进对于“工匠”的理解，就
这个问题我们有过私下的讨论，很愉快的一次谈话。
1. 请问你现在处于什么样的工作状态中？
现在正在用自己的积蓄创业。
全职创业最早是从11 年3月份开始的，那时候团队有 5 个创始人，都是之前迅雷的同事，还是平分股份的(现在想想就不靠谱)。结果，1 个月不到就走了一个；3个月不到，第一个
产品发了以后，又走了一个；11年10月份的时候，又走了一个。后来就稳定下来了。
13 年 6 月时正式成立公司，现在还很小，我们招人也很谨慎，除我和另一个创始人之外，还有1 个全职员工和1 个兼职员工。现在已经盈利，不过还在不断摸索更强力的现金流产品
(我们是很务实的，自己养活自己先)。
除了我之外，小伙伴们都是工程师，不过，其实我的主要工作也是写代码，偶尔还做做设计。
与其说我是产品经理或者工程师什么的，我更喜欢这个称呼“工匠”。
因为团队小，也没有那么多的流程。产品问题的话，基本上不会抽出专门的时间去考虑，都
是从平时积累的需求列表中找一个最醒目的来做。基本上一个需求讲解一下就开始做了，需
求点拆得比较小，所以也没有文档(偶尔会画个原型图就算是大需求了)，一边做一边调整。
大家也都磨合得比较好了，小伙伴们在开发过程中的需求确认点也找得很准，很少改需求(根
本就没有详细需求好吧……)。
产品的版本周期很短，不是首发版的话，有时一天发几个版本。如果一个需求要做一周以上
的时间，我就会觉得异常焦虑。
公司规定的工作时间是周一到周五，每天9 点到晚上 6点。不过，最近一段时间工作比较紧
张一点，都是从早上9点到晚上10点，每周工作6天。
不过对于我来说，还是周一到周六比较轻松，周日的话反而不知道有什么事情可以干了，觉
得无聊得很。
总的来说，是处于工作狂buff 中。
2. 你是如何理解“工匠”这个词的，在我看来，它更是一种做事的态度与精神。
说到工匠，我脑子中浮现出来的都是一些传统的手艺人，比如 “木工”、“铁匠”、“铸剑师”
等。 UI 设计点滴
37
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
对于他们来说，自己要为产品的“方方面面”负责。
功能不好，是自己的创造力不行，做的难看，是自己审美观不行，做的质量差，是自己技术
不行。
如果任何一方面是必须要交给其他人做的，那就不是工匠。
当然也可以想象工匠之间也有合作，能力也有侧重。但是前提是一个人也行。
在做软件产品的时候，就得懂产品、懂设计、懂技术。
P 得了 S，切得了图，写得了 C++，搭得了服务器，起码不会的时候第一想到的是自己去钻
研和尝试，而不是“谁来搞一下”。
总结一下就是，“工匠”有一种想为产品方方面面负责的态度和精神，加上能为产品方方面
面负责的能力。
3. 是在什么样的情况下想到做 MarkMan 这个产品的，现在在这个产品情况如何？
做MarkMan的时候，我还在上海的一家不知名的公司全职上班。
那时是突然想到，设计师在设计稿上面有时候会画上长度标记供开发人员参考，就好奇这个
是怎么做的(心里想：不会是一笔一笔画的吧)，问了几个设计师，竟然还真是一笔一笔画
的。
然后我就怀着无限的同情，一边学AIR开发，一边做，没有睡觉，花了一个通宵做了个 MVP
出来。虽然当时界面很丑，功能很简陋(只能标长度)，但发到微博上面去的时候，就已经
很受广大设计师同学们的欢迎了。
后来就根据大家的反馈，慢慢优化，多加了几种标记，承蒙之前在迅雷的2位设计师在设计
上的大力而且无偿的支持，做成了现在这种比较拿得出手的样子。
其实做马克鳗的过程在我们团队还是比较典型的，就是发现问题，找到解决方案，迅速做出
MVP，吸收反馈逐渐优化。
我们对于一个 idea 一般不会论证太长时间，觉得有需求，而且念念不忘，就会找时间快速
做出来。
马克鳗一直以来都是比较健康地在自然增长的，用户虽然不多(现在每天大约1500人上线)，但每个月都有看得到的增长，而且增长的趋势没有慢下来。尽管我一直以来都没有特意做什
么推广。
4. 你大学时学的是工商管理，是什么样的机缘使你转向互联网，还到迅雷做了产品经理？
我身边的人，更多的是会问我为什么大学要去学工商管理，呵呵
从小到大，一直都是一个技术宅，小学三年级的时候，从家里翻出一本关于 Basic(一种面
向初学者的编程语言)的书，虽然没摸过电脑，但还是很有兴趣地看了半夜。
UI 设计点滴
38
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
97 年读初一，那时家里买了电脑，当然主要是拿来玩游戏的。不过也因为喜欢玩游戏，所
以就想自己做一个(应该不少人都有这种想法吧，哈哈)。于是就开始自学编程。不过那个
时候信息实在是太匮乏了，不像现在，想要了解什么 google 一下就都有了(抱歉百度还做
不到)。结果也没怎么学进去，那个时候太小，很多概念都没法理解，比如函数的概念对于
我来说就是一个无法逾越的障碍，更不要说指针什么的了。
不过学了还是有一点用处的，上电脑课的时候，当同学们还在尝试让屏幕显示“hello world”
的时候，我已经在让电脑在全屏幕上随机生成彩色线条了，那个时候看起来非常炫，也换来
了妹子们崇拜的眼神(也只限于眼神而已)。
后来高一的时候，家里装了网络，就是电话线拨号，最高下载速度5KBs，电话拨进来要断
线的那种。我爸那时候在卖收藏品，于是怂恿我帮他做一个卖收藏品的网站，说通过网站达
成的交易，给我提成。
于是我就开始学怎么做网站。
刚开始是做纯 HTML 的静态网站(那个时候还没有 cssjs)，其实也简单，用 dream weaver
拖拖拽拽就出来了。
后来发现不行，太累了，很多内容都是重复的(比如详情页)，于是从高二起就开始研究怎
么用程序来做，于是就学会了怎么用 ASP(有一段时期，ASP和 PHP还是平起平坐的，现在
完全没落了)来做动态网站。这大概是我第一次做出完整的产品。
整个初中和高中时期，我基本上都是班里所谓的“电脑高手”，那个时候也完全没有分工的
概念，如果要做一个东西，就全都是你来。所以那个时候自学了很多东西，比如为了破解
H-Game 的存档，去学了一下汇编(未遂)，为了参加一个奥运主题的 flash 设计比赛，自学
做flash动画等等。接触面是比较广，但是都不精。
至于大学为什么要选择工商管理，其实是两个因素搀和起来的。一方面是高三的时候被几样
东西洗脑了，一个是《穷爸爸富爸爸》这本书，一个是余世维的关于管理的讲座，还有就是
一些成功学的书，觉得做商人做管理太帅了。另外一方面就是，我自己也觉得自己太内向了，也希望让自己将来能变得不一样一点。所以最后就报了文科类的工商管理专业。
虽然报的是工商管理专业，但平时一点都不像这个专业的人。平时还是做我的技术宅，学学
技术，有时小试牛刀做些小工具小网站。当然，主要的时间还是和多数宅男一样，玩游戏，看片，(试图)交女朋友。
当时找工作之前我是很担心的，因为像我这样一个人，虽然懂一些技术，但是和技术专业出
来的人没法比(其实现在回顾来看，当时还是有竞争力的)；工商管理专业方面的话，也学
得很一般；社会实践也很少。
有一次，在看招聘帖的时候，突然看到了微软的招聘，看下来有一个职位叫Product Manager，我一看需求，卧槽，这不说的就是我嘛。原来我最适合做的就是产品经理啊。那时候我才知
道了我的定位。 UI 设计点滴
39
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
于是后面就好办了，我自己想好了，要去一家互联网公司，不能太大，否则没有发挥的空间，而且要有上市潜力的(暴发户谁不想做啊)。很自然，最后就做了迅雷的产品经理。其实我
的职业生涯是从小学时候开始的。
5. 是否可以谈谈在迅雷的这段工作经历？
我是07 年进的迅雷，当时考虑的是进一个有潜力的小公司，这样比较有成长和发挥的空间。
可以快速培养能力，并且利用公司资源试错。如果能上市，还能为创业积累一些启动资金。
是的，身为一个浙江人，创业的种子在很小就被种下了。
进了迅雷以后，除了上市，其他都很符合我当初的期望。
刚进入迅雷时，Web2.0 概念刚起来没多久，所以当时成立了一个社区事业部，我刚进去的
时候就在里面。那时候多是打打杂，做做后台项目的需求，这个阶段基本上就是练基本功，了解怎么写文档、做原型图、和各方沟通。
后来大概是08年的时候，视频事业部(部门名字经常变，不一定对)，因为要推广迅雷看看，所以成立了一个“网视联盟”，让站长把看看的片源很方便地嵌入到自己的网站上，而且还
能得到佣金。
因为缺少产品经理，而且我又没什么重要的事在做，所以我就过去了。
这是我在迅雷做的第一个面向用户的产品，而且是独立负责。当时每周都有百分之几十的播
放量增长，非常爽。
不过没过几个月时间，迅雷联盟那边的部门(简称“联盟”)不爽了，把网视联盟的产品要
了过去，当时联盟那边有一个比较强势的产品经理，所以他们只要了产品，没要我。
我对这种明抢的行为，愤愤不平了好几天，甚至联盟负责人来找我沟通的时候，我都没给好
脸色，真心是把产品当自己的孩子了，哈哈。
但大概过了一两周时间，联盟发现还是需要我，于是我就到了联盟那边继续做我原来的产品。
到了联盟之后，大家相互之间也没有了“敌意”，我很快融入了进去。产品的播放量蒸蒸日
上。不过依然好景不长，半年后，公司的法务部门介入了，说这个产品不能搞了，看看只是
有权在自己的网站上面播放授权的视频，不能嵌入到其他网站上面去。就是这么简单，做了
近1年的产品只能说再见了。
后来就继续做了一些面向站长的联盟服务，比如 网站统计(类似cnzz，51la)，但是这个项
目后来因为钱景不明+开发人员少，在第一版发布之后，就无力更新了。我也第一次认识到
了，即使是以烧钱出名的互联网行业，光赚用户不赚钱的行为也是持续不久的。那之前我天
真的认为，有用户就等于有钱。
大概到 09 年的时候，视频这一块又有了一个新的思路，那时候有一个很好的参考对象“快
播”，凭借迅雷的 P2P 的播放技术，可以抢占快播的市场。于是成立了“GVOD 迅播”项目
组，由于跨越了视频和联盟两个事业部，再加上之前我有相关的经验，所以我就顺理成章地
成为了项目经理(职务比产品经理更全面)。 UI 设计点滴
40
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
做了这个项目经理之后，我才真的有一种 hold 不住的感觉。播放流畅性问题问题，要去视
频部门找开发；给站长带量问题(站长做 gvod，迅雷的狗狗搜索引擎会给站长带量)，要找
搜索部门沟通；还要联系好站长系统源码的开发者，让他们提供集成；还要时刻关注法务问
题；每天就是在各个部门之间奔走沟通。
那个时候迅雷已经有大几百人了，公司一大，相互之间配合和沟通就变得困难了，每个部门
还都有自己的考量，各种问题都会暴露出来，并且推进很慢。
所以进小公司就是这样，会有独立承担大项目的机会。大公司就可能连搞个主题活动，都得
有N 个产品经理合作。
最后，这个项目在 09 年互联网的冬天中，为了节省公司开支(需要按照播放量给站长支付
佣金)，终结了这个项目，我又无所事事了。
之后，因为视频部门的需要，我又回到了视频部门，做了差不多 1 年的“迅雷影音”(现在
叫迅雷看看播放器，但我还是喜欢之前的名字)的产品经理，这段时间做的还是比较纯粹地
产品经理。在10年中开始，又去会员部门负责了几个产品。在10 年的下半年觉得没什么意
思了，就离开了迅雷，怀揣 3万的积蓄，准备创业。
总的来说，在迅雷这几年，除了收入低了点，其他都不错。
经历上比较丰富，能力的锻炼也比较充分，老大们人也都很好。
6. 创业到现在，都做了哪些产品，怎么在市面都很少看到(或许是我寡闻了)
我们产品上做过很多的尝试，创业以来，做了不下10个产品，涉及的领域也比较广。
另外我们很少做面向大众的产品，都是以一个比较专业的领域作为切入的。
不过多数产品都是做出来以后市场反馈不佳，或者我们自己不满意，最后就停止运营或者放
着不管了。
其实最主要的原因是我们做的还不够好，所以大家没听说过。
这里稍微选取几个产品：
1、F5(www.getF5.com)：是一个面向Web开发人员的工具，最主要的功能是在保存代码的
时候，实时地刷新网页，减少开发人员频繁切换窗口按刷新的操作。这个是一个收费软件，也是作为我们卖软件收费的一个尝试，不过收入大概只有一个月几百，所以暂时也没有维护。
2、随手背四级(ios)：是一个极简的背单词软件，所有单词解释都是经过人工提炼(以减
少记忆成本)，例句都是人工筛选，背的时候只需要选择记得和不记得就能自动按照记忆曲
线帮你安排复习节奏。在 appstore 上可以下载到，不过放出去以后用户留存率很低，所以
暂也没有后续维护。
3、淘密探(www.taomitan.com)：是一个面向淘宝卖家的服务，可以打探任何一个店铺的月
销量、销售额、畅销产品排行。不过这个产品一直无论怎么做用户量都很稳定(怎么做都不
增不跌)，后来有更重要的项目做了，所以就放着没管。
当然还有马克鳗，这个就不多说了。
可以看出来，我们产品选取的切入点都比较小众，我们认为只有这样才能快速迭代(不仅仅
是版本的迭代，而且是不同产品的切换)。
UI 设计点滴
41
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
现在主要的盈利产品不太方便透露，这里不具体说了，但选取切入点的思路是一样的。
7. 在公司中，你的精力怎么分配？
作为一个创业小团队，每天的事情基本都是围绕产品的。
首先，我的职能是产品经理，我会确保每个产品都有一个按优先级和依赖关系排列的需求列
表(在trello上)。好确保开发的小伙伴知道，下一件最重要的需求是什么，不至于空等。
其次，我们团队目前没有专职的视觉和交互设计师，所以多数情况下我会把涉及到界面的部
分用visio画好原型图，或者直接用HTMLcss做出重构稿，做web的话多数都是用现成的框
架，所以需要设计的部分也不多。
然后，有些产品有客服 QQ和官方微博，我会全天挂着客服 QQ和官方微博，时不时地 check
一下，是不是有用户需要跟进，如果有技术问题会先过滤一下，再交给开发跟进。
如果时间还有多的话，我就会从去求列表里面找一个还没人认领的需求，做一下开发。
不过多数的时间还是在写代码。
有人可能会觉得，你作为产品经理，为什么不做好本职工作，花时间写一下详细的需求文档？
其实理由很简单，我们发现，没有需求文档的时候，产品推进更快，产品质量更高。
8. 虽然我不是投资人，但还是想问一下，当你所做的产品有大公司跟进时，你会如何应对？
我想这个恐怕没有统一的应对策略，只能见招拆招。
但真到那一天的时候也不用过分悲观，因为：
1)大公司不一定会足够重视(狐狸追兔子只是为了报餐一顿，兔子逃跑是为了活命)
2)大公司没有小团队灵活(小团队1 天发几个版本，随时加班)
3)还可以卖给大公司或者他们的竞争对手
4)投资人，你再多投点
话说，大概马克鳗 MVP 发布 1 个月以后，腾讯发布了他们的 Dorado 标记软件。然后很快，马克鳗发布更强大1.0版本，并且赢得了民意。然后，Dorado就没有声音了……
不过，我们立项之前，一般都会考虑是否会有大公司关注，是否会被秒杀，如果这种可能性
很大的话，就尽量不做这种项目。
我们还有一个产品叫“我们来记账”，是一个移动端的产品，可以方便朋友们出去腐败的时
候记录开销(经常出去腐败，一般都是轮流给钱，但是每次参与的人都不一样，容易算不清
楚)。后来考虑到如果这种产品即使好了，很多人用，到时候支付宝钱包之类的客户端出一
个类似插件，我们就被秒杀了。后来就没有继续做下去。
UI 设计点滴
42
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
对于创业团队，尽量选择比较小的利基市场，一年赚 300万，对于大公司来说，根本看不上，对于3 人团队来说，还是可以的。先活下去，在去实现更大的理想。
9. 你是怎么理解合作精神的？
时刻把团队目标放在第一位。
10. 对于公司的、个人的未来有何法或规划？
公司的话，希望能找到一个强力的设计师的加盟，设计是我们的短板。
规划的话，我知道现在不是做长远规划的时候，唯一的规划就是多做赚钱的产品，以及让产
品多赚钱；等到我们可以每天光喝茶聊天也不担心房贷的的时候，就可以做一下长远的规划
了。
我个人的话，对现在的生活状态还挺满意的。将来希望有资源和精力来尝试更多领域(比如
硬件？)。
UI 设计点滴
43
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
Design Hackathon 工具手册
(文章经豌豆荚设计师授权转刊)
什么是 Design Hackathon ？
Hackathon，即「黑客马拉松」，是一个流传于程序员和技术爱好者中的活动。在该活动当中，大家相聚在一起，以合作的形式去编程，整个编程的过程几乎没有任何限制或方向。Design
Hackathon 类似用「黑客马拉松」的思维做产品设计，它将所有的产品设计师、视觉设计师
甚至工程师聚在一起，在一定的时间内，以头脑风暴的方式，最大范围地搜集产品的各种可
能性，然后抽象地整理出这些想法背后所隐藏的核心概念和产品需求，快速梳理出正确的产
品设计方向，之后将想法转化成可视的手稿和线框图，最终变成产品雏形。
快速发现海量可能性
Design Hackathon 非常适合产品定义阶段。在产品定义阶段，设计方向和目标尚模糊，产品
形态发展的可能性非常多。如果仅仅采用传统的设计手段(比如单人决策)，非常容易走向
片面和狭隘的方向，既可能出错，也会丧失许多机会。 Design Hackathon 将所有与产品相
关的人员聚在一起，利用头脑风暴法，快速产生海量想法和点子，让产品设计从个人经验和
竞品预设的桎梏中脱离出来，搜集最大范围的产品可能性。
确定方向并拥有可落地的细节
Design Hackathon 遵循了一个「从发散到抽象再到具体」的过程，从最直接的个人经验、想
法或者灵机一动的点子出发，抽象地归纳出这些想法背后所隐藏的核心概念或产品需求，最
后再回归到具体的产品设计草图当中。这个由「发散到抽象再到具体」的过程，既保证了思
维发散阶段的丰富性和灵感的多元化，又能达到将想法现实化的目的。
激发不同角色团队成员的创意
Design Hackathon 参与人员并不局限于产品设计师和交互设计师，而是可以拓展到工程师等
其他产品相关人员。不同背景和角色的人通过讨论和互动，能够相互激发灵感，获得丰富的
创意。在产品的设计过程中，设计师、工程师和高层领导者由于背景和理解问题的角度不同，常常会产生分歧和争议，使产品设计的时间周期变得不可预测。Design Hackathon 的方法论
可以让整个产品团队都加入其中，在平等、专注且高效的状态下，通过分类的方法，将所有
人思考的亮点条理化，汇聚到最终的产品设计中。
如何操作 Design Hackathon？
准备阶段
在 Design Hackathon 开始之前，我们需要先做一些准备工作，包括场地、人数和纸笔的准
备。
1) 人数：Design Hackathon 的参与人数以 8-15 人为宜，产品设计师、视觉设计师甚至工程
师等所有与产品相关的人员都可以参加；
2) 场地：场地需要容纳 5-7 组桌椅(因为在「方案设计」环节，所有人需要被分为 5-7 组)， UI 设计点滴
44
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
能保证每组成员都无障碍地写纸条和绘制线框图；
3) 物料：每位参加者需要配备 1 支马克笔，至少 1 支绘图铅笔，至少 1 本记事贴或 N 次
贴，3–5 张 A3 白纸。场地内还需要有一块大的白板 or 白墙(需要能容纳 100-200 张记
事贴)。PPT 和幻灯设备根据情况选择；
4) Design Hackathon 整场需要 1 位主持人，主持人只负责引导和组织，原则上不提供任何
关于产品的主观导向。
1. 发散：解决问题的方式
在开始一切之前，我们首先需要明确自己要解决的问题是什么。我们可能是需要设计一个全
新的产品，但我们对这个产品只有模模糊糊的想法。我们已经了解到一些用户遇到的困难和
问题，但是这个产品具体会以什么样的方式解决这些问题，呈现成什么样，应该有哪些功能
和特点，我们并不清楚。
解决任何一个问题的方式都是多种多样的，我们可以使用「How might we……」的句式，从
各个不同的角度分解问题，找出所有可能解决问题的方式。在这个阶段，我们需要的是开阔
思路，追求的是全面的、打破常规的思维和方向，不需要评价它是不是严谨，是不是可实现，更不需要提出具体的解决方案，解决方案将会在后续阶段补充。
举个例子，如果我们的问题是，到了一家餐厅不知道吃什么？
那么，我们需要使用「How might we……」的句式，从所有可能的角度来分解这个问题：
如何让点菜的过程变得有趣 (既然点菜的过程很麻烦)？
如何不去餐厅(不去餐厅也就不存在点菜的问题了)？
如何让大家不吃饭呢？(不吃饭也就不存在点菜的问题了)
如何知道大家最爱吃什么？
如何让大家口味都变得一样(这样就解决了众口难调的问题了) ？
如何事先知道这个菜大家喜欢不喜欢？
如何点主菜、素菜、汤(点一整桌菜可能很麻烦，但是只点一个汤就好多了)？
如何让大家进入餐厅就自然知道点什么菜？
等等……
2. 头脑风暴
通过前一步的预热，我们已经整理出产品开发中可能遇到的问题了。我们接下来要做的，是
基于这些问题，自由地、无拘无束地阐述解决方案。
我们需要最大范围地尽力去想各种可能的解决方案或 idea，不要限制自己的思维。任何人
想到一个 idea，就写在纸条或卡片上。
可以采用类似 N×5×5 的方式。N 表示所有参与头脑风暴的人总数，这个式子表示需要每人
在 5min 的时间内写下 5 个想法，然后将这 5 个想法传给下一个人，同时接收上一个人
传来的 5 个想法，再写一轮，如此类推，N 轮过后，每个人手中都会有 5N 个想法，所有
人共有 5×N×N 个。所有人都要写，但是相互之间不要交流。这样，每个人既会受到他人的
激发，又不会受他人想法的限制。 UI 设计点滴
45
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
7_1
譬如，在第一步的点菜问题上，针对「如何让进入餐厅就自然知道点什么菜？」，我们可能
会有很多的想法：
可以在餐厅门口放上菜单，任顾客翻阅浏览；
可以做招牌菜的海报或易拉宝展示；
可以做食客最多点选的菜肴 list；
甚至可以像风波庄那样，根本无需点菜，只需要食客告诉服务员用餐人数和忌口，服务员马
上就能为你上菜……
头脑风暴中，需要所有人遵守几项原则：
1) 不要关心老板或者领导的意见；
2) 不要限制自己的想法，因为往往到了下一阶段的执行，现实条件会给你限制的；
3) 不要放弃捷径，要站在巨人的肩膀上；
4) 不要讲太过于抽象的东西，譬如「做一个更好的产品」 ；
5) 事先设定一个时间限制，不可草草结束或无限拉长时间。
3. 卡片分类和完善
通过上一步的头脑风暴，我们会搜集到 100-200 个想法，甚至更多。这些 idea 都是感性
的、灵光一闪的、零散的。这一步，我们需要将这些 idea 组织起来，抽象出其中暗含的核
心功能或需求。我们需要对搜集到的所有想法进行分类，大概分成 5-7 类，每个类别都需
要有一个概括性的标题。
分类没有一定的规则，因为一般情况下，这个分类不需要非常严谨，由主持人组织大家讨论 UI 设计点滴
46
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
进行。每类下包含 idea 的数量应该差不多，如果有某个类别所包含的 idea 数量明显少于
其他组，则需要大家一起思考，为这个分类再做补充，直到所有类别下 idea 的数量大致相
等。
7_2
关于上一个点菜的问题，我们可能产生了很多的想法，这其中有一些是关于菜单设计的，有
一些是关于服务员服务技巧的，还有一些是关于餐厅制度的，等等。
4. 方案设计
经过分类，这些头脑风暴产生的零散想法之间就有了关联，每一个类别下的想法，对应的就
是一类功能或需求。截至此阶段，设计师们也会开始产生一些具象化的内容。这一步，我们
需要发动所有的设计师参与和贡献：将所有的设计师分组，每一组设计师领走一个类别的卡
片；根据这些卡片上的信息，设计师可以开始绘制草图和线框图，也可以出一个故事板。
对于每个组，绘图的过程和方式比较灵活，可以是每位组员分工做，根据所拿到的 idea 做
不同方面的草图，也可以组员一起讨论出一个草图。对 idea 的取舍由设计师自己确定。 UI 设计点滴
47
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
7_3
当所有的组都完成了草图或故事板后, 主持人可以进行简单的点评。之后, 这些成果就可以
交给具体负责产品的设计师做正式的产品设计了。
总结
Design Hackathon 遵循了「从发散到抽象再到具体」的思维过程。「发散」保证了我们不会
错失有关产品设计的各种可能性和细节，「抽象」帮助我们整理出想法中的产品逻辑和需求
层次，而「再具体」的过程则保证了我们所有的想法和需求都能落地成为可见的设计。通过
Design Hackathon 的方式，我们能够快速、准确地整理出一条正确的产品设计方向。
-------------------------------------------------------
文章内容来自豌豆荚设计团队，感觉豌豆荚的授权，豌豆实验室是个好地方，想做产品设计
的可以试试。www.wandoujia.com
UI 设计点滴
48
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
从版本升级看产品设计
软件开发中大家都比较认同的理念是敏捷，通过快速迭代来不断升级产品，从而达到产品更
好地服务于用户的目的。在这一次次的升级中，我们可以看到产品所折射出来的思想，了解
到设计人员的思考方式。查看某一产品的升级日志，对其进行归纳对比，这是我们进行竞品
分析时一个非常重要的方法。
研究豌豆荚这个产品的发展是一件很有意思，也很令人烦燥的事，一方面它的设计中处处显
示着用心，另一方面又因为有太多可以研究的内容而让人理不清头绪，只能不停地抓头发，对着升级日志，冥思苦想。
在豌豆荚1.X版本中，它更多的是扮演 Android 手机管理工具的角色，所有主体功能(欢迎、通讯录、短信、应用游戏、音乐铃声、视频、小说杂志、图片)都排列在顶部导航上，二级
导航位于左侧边栏。这是一种典型的工具型软件的布局，方便用户进行手机的管理。这样的
设计或许与当时的形势有关，2010 年初，国内 Android 手机的用户并不多，当时的用户都
是求新求变的一群人，对于手机的管理需求比较大，但当时游戏应用的数量也不多，用户对
于游戏应用的需求更大，同时期的应用汇、安智、机锋、N多等都做起了市场，豌豆荚为什
么不去做个应用市场呢？
8_1 豌豆荚首页
2011 年5月20日，豌豆荚发布了应用搜索，聚合多家应用商店的内容，这时豌豆荚的野心
开始显露了出来，这群人想做垂直领域内的搜索引擎，他们同时推出了 Web 版本和手机客
户端，结合之前PC 端积累下来的优势，一跃成为强有力的应用分发渠道。这时的应用市场
正处于群雄割据的局面，没有明显的技术壁垒导致在这个方向上的创业者众多，创业者们想
要更多的流量，和豌豆荚合作已是一种不得已的选择。 UI 设计点滴
49
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
8_2 搜索页
2012 年初，豌豆荚发布了历时 10 个月设计开发的 2.0 版本，在对需求进行重新归纳整理，对导航及信息架构进行了重新规划后，2.0 版本给了用户焕然一新的感觉。据豌豆荚团队介
绍，它们的这次改版，扔掉了 .Net framework 的架构，重新用 C++ 开发。在界面布局上进
行了大刀阔斧又细致入微的设计。我们可以看到导航全部移动了左侧，手机管理功能与内容
下载并列，与1.0版相比，豌豆荚大大提升了内容下载的权重，这也是趋势使然。这个时候
Android 手机用户增长迅猛，游戏应用下载的需求成了重中之重。在欢迎页上，豌豆荚也做
了精力的设计，以此加强用户和手机间的情感联系，他们使用了用户在手机上设置的壁纸来
作为欢迎页的背景，并在此基础上加入了应用推荐。
8_3 豌豆荚 2.0欢迎页 UI 设计点滴
50
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
在接下来的版本升级中，豌豆荚还别出心裁地以元素周期表中的化学元素来进行命名。在业
界， Android 的升级会以甜点的名字来命名，而 Mac OS X 则以大型猫科动物的名字来命名。
不知是不是因为豌豆荚的化学元素不够稳定，导致豌豆荚的升级过于频繁，引起了用户的反
感。所以版本升级的频率也是我们在产品设计中需要考虑的问题，什么情况下必须升级，什
么情况下可以暂缓升级，通过怎样的升级频率来提高用户的活跃度？
2013 年6 月 25 日，豌豆荚 PC 端升级到了2.58 版本，代号为 Dy(镝)，这次他们对侧边栏
和导航又做了改动，把资源下载提到了手机管理功能的上面，再一次加强了下载的权重。在
视觉上也做了调整，把左侧栏的底色改为较深的灰黑色，重新设计了彩色的小图标，对于界
面的尺寸还进行了像素级的调整，以此让右侧的可视区域更大、更明显，方便用户的下载。
之后的升级更让人看到了豌豆荚团队的用心，他们请左佐工作室重新设计了 Logo 和标志，进行更清晰的形象定义。再一次设计了欢迎页面，把手机管理与发现探索结合在了一起，只
需上下滑动就能无缝地切换场景，另外还精心挑选出高清背景图片，一键设置为手机壁纸。
在内容的组织上，豌豆荚除了进行游戏联运的商业尝试外，还把论坛版块加入到客户端中，以此增加用户的参与度，加强用户黏性，更是进行UGC社区运营的一种尝试。
8_4 豌豆荚 2.62 版
以上分析的都是豌豆荚在PC 端上的产品设计过程，在移动互联越来越重要的今天，豌豆荚
手机端是怎样进行演变的呢？
在 1.0 版本中，豌豆荚在手机上还只是个守护，用来连接 PC 上的客户端。在推出应用搜索
之后，豌豆荚手机端进行了改版，加入了应用搜索下载，已成为手机上的 Android 应用市
场。之后就是不断的优化升级，直到 2012 年版本走到 3.0。在这个版本中，它采用了符合
Android 4.0 规范的Holo Light 风格，因此有人觉得它与 Google Play 4.0 版本很像。对此，豌豆荚的设计人员在知乎上进行了解释： UI 设计点滴
51
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1. 淡绿色和灰色一直是豌豆荚的品牌色彩，而 Google Play 应用频道的品牌色也是淡绿色，造成了两者在视觉上第一印象很接近。
2. 综合考虑手机界面显示、应用信息的推荐，豌豆荚采用了简单紧凑的卡片版式设计，而
Google Play 从 Google Now 等应用中沿用了卡片的风格。
3. 豌豆荚在内容的推荐上更具人情味，在信息架构上与 Google Play 是不同的，另外在应
用的安全和隐私方面也做得更多。
8_5 左豌豆荚 3.0 右 Google Play 4.0
的确，豌豆实验室里有着拥有独特气质的一群人，这群人对设计也有很深的理解，他们设计
的豌豆荚已成为一个非常重要的应用分发渠道。然而又不只是应用分发渠道那么简单，在
2013 年9月12日，豌豆荚发布了视频搜索，以满足用户对视频的需求。在移动视频搜索端，它收录了13 个内容源，分为电影、电视、综艺、动漫，全部来自各大视频 App，非传统网
页。豌豆荚要打破 App 之间的壁垒，要做移动端上的搜索引擎，做内容发现平台，从他们
的产品设计中，我们可以深刻地感受到这些显著的变化。
这一变化在 2014 年 1 月份来得更加迅猛，这个月初豌豆荚手机端发布了 4.0 版本，去除了
旧版中左侧的抽屉式导航，把应用、游戏、视频、电子书、壁纸等资源直接展示主界面上，把自己定位为手机上的娱乐中心，在文案上也做处处做引导，以此改变人们心中豌豆荚就是
个应用市场的印象。新版本更加清新简洁，并没有完全遵守 Android 的设计规范，但使用
下来，学习成本并不高。 UI 设计点滴
52
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计点滴
53
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
向豌豆荚的产品设计师了解到，从最初发布到现在，豌豆荚 PC端进行上百次的升级，而手
机端也有几十次的升级。在这么多的升级中，有bug 的修复，小功能的增加，细节的调整，还有重大的改版，每一次的升级都包含了工作人员对于产品设计的思考，对于这个产品方向
上的尝试，有成功的也有失败的。作为一名产品设计的从业人员，没能参与到豌豆荚这个产
口的整个设计过程中，只能从零星的信息中来猜测他们的设计思路，管中窥豹，说得不对的
地方还请指正。
UI 设计点滴
54
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
[慢工细活]设计思考
因为有想过在这座城市、这个村庄开一间杂货店，出售手工作品，工作之余打理打理。也希
望通过自己的努力,让偌大的中国能够容得下我的一张书桌。
当你手中有一把锤子的时候，你所看到的都是钉子。由于从事UI 设计相关工作，主要针对
移动互联网领域，因此，首先想到的是这个怎么设计成 iOS 应用。于是对杂货、创意产品、手工作品的相关网站及应用进行了一番研究，然后试着结合移动设备的特性，对这个应用进
行了设计。希望人们可以利用碎片时间(排队、等车、坐车等)使用这个应用，通过它方便
地发现有爱的手工作品，也可以向他人展示自己的作品。
(PS：我把这个应用取名为【慢工细活】，想表现出手工作品的特性，这些作品都是手工作
者们的用心去制作出来了，倾注了他们的心思与爱，也想表达一种“慢”的生活态度，闲暇
之余，欣赏一下这些有爱的手工作品)
根据【慢工细活】所要达到的目标，对需求进行了梳理，如下图： UI 设计点滴
55
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
接着是交互设计阶段，由于平时研究的应用比较多，在此应用设计上时展得比较顺利，采用 UI 设计点滴
56
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
了常见的Navogation bar 和tab bar 布局，这种方式对于多信息的展示及切换是非常方便
的，一些新颖的交互方式也有考虑，留着下个应用再尝试使用。
UI 设计点滴
57
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
(PPS： 此过程中研究的应用有：Path, Pinterest, Etsy, Bump, Instagram, Calvetica,下厨房，过日子，花瓣，堆糖精选，QQ2012 等，其中下厨房做得真用心，关于这个应用的
研究可以单独成文了)
视觉设计上对风格也进行了一些尝试，最终的设计效果如下：
UI 设计点滴
58
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计点滴
59
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
总结：设计是一个为断优化的过程，在进行交互设计时会去反推需求，在进行视觉设计时又
会去反思交互。如果有一个想法，那就去实现它，关于【慢工细活的】的创意在我脑子里盘
璇了很久，现在利用所学的知识，完成了设计。 ......
吴启文 产品设计师
Email: hanyan51@gmail.com
Tel: 18602123593
UI 设计点滴
2
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
目录
什么是 UI 设计 .............................................................................................................................. 3
UI 设计相关岗位 ............................................................................................................................ 5
UI 设计相关工具 .......................................................................................................................... 10
UI 设计资源介绍 .......................................................................................................................... 17
计算机操作系统界面发展史 ......................................................................................................... 19
MarkMan 作者专访 .................................................................................................................... 36
Design Hackathon 工具手册 .................................................................................................... 43
从版本升级看产品设计 ................................................................................................................. 48
[慢工细活]设计思考 ...................................................................................................................... 54
UI 设计点滴
3
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
什么是 UI 设计
UI 是 User Interface 的缩写，直译为用户界面。很多人认为图形设计或视觉效果制作就是 UI
设计，其实这只是 UI 设计中很小的一部分内容，即 GUI(Graphic user interface) 设计的环
节。UI 设计的概念很大，也很系统，它分为用户体验(User experience-UX)设计、人机交互设
计(Human computer Interaction-HCI)、图形设计(Graphic user interface-GUI)、用可性研究
(Usability)、规范制定(UX-Guideline)、甚至涉及到了人体工程学、心理学和商业模式等领域。
在 UI 设计过程中还包含了很多决定性的研究阶段，如场景设计(Scenario)、典型用户设计
(Persona) 等。
UI 设计是为用户设计产品过程中一个非常重要的环节，其目的是利用科技手段验证制作出
从用户角度出发的产品，提高用户行为效率，提升用户使用体验。
什么是用户体验(User experience-UX)
总的来说，用户在使用产品过程中产生的互动体验统称为用户体验，这是一个很宽泛的概念，可以从很多角度切入，如产品的可用性、易用性，品牌与产品的契合度等。
用户体验的研究牵涉到了产品从前期到后期的诸多环节。从最初的产品策划开始，UX 部门
(也称 UE 部)就需要配合完善产品的商业模式、用户调研、提炼典型用户、产品情景设计、分析产品的生活样式(lifestyle)、提炼产品的视觉识别、质感识别等。后期要提出解决方案、制作配合、数据反馈、用户跟踪及市场跟踪等，最后根据以上所有步骤的研究结果制作出相
应的规范(UX-Guideline)。
什么是交互设计(Interaction Design)
交互设计是指设计师对产品与它的使用者之间的互动机制进行分析、预测、定义、规划、描
述和探索的过程。简单的说，即设计和定义使用者如何使用一产品达到其目标，完成某一任
务的过程。它致力于了解目标用户及他们的需求，了解用户在同产品交互时的行为特征，了
解“人”本身的心理特点。
交互设计作为一门关注交互体验的学科在二十世纪八十年代就产生了，它由IDEO 的一位创
始人比尔· 莫格里奇在1984 年一次设计会议上提出，他一开始给它命名为 “软面(Soft Face)”，由于这个名字容易让人联想到当里流行的玩具“椰菜娃娃(Cabbage Patch doll)”，后来他把它
命名为Interaction Design。
交互设计的目的是使用户在使用产品过程中保持愉悦，有效地完成目标。因此，人的因素应
作为设计的核心被体现出来。
一般而言，交互设计师都遵循类似的步骤进行设计，为特定的设计问题提供某个解决方案(没
有绝对正确的方案)。设计流程的关键是快速迭代，快速建立原型，通过用户测试改进设计
方案。各步骤的要点如下：
1. 用户调研：通过用户研究的手段(介入观察、非介入观察、采访等)，交互设计师调查了
解用户及其相关的使用场景，以使对其有深刻的认识(主要包括用户使用时的心理模式和行
为模式)，从而为后续设计提供良好的依据。 UI 设计点滴
4
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2. 概念设计：通过综合考虑用户调研的结果、技术可行性、以及商业机会，交互设计师为
设计的目标创建概念(目标可能是新的软件、产品、服务或者系统)。整个过程可能来回迭
代多次，其中包含了多次头脑风暴、细化概念模型等活动。
3. 创建用户模型：基于用户调研得到的用户行为模式，设计师创建场景或者用户故事
(Storyboard)来描绘设计中产品将来可能的形态。通常，典型用户设计(Persona)会作为创建场
景的基础。
4. 创建界面流程：交互设计师通常采用 Wireframe(线框图)来描述设计对象的功能和行
为。在 Wireframe 中，采用分页或分屏(包含相关部分的注解)的方式来描述设计对象的
细节及操作流程。
5. 开发原型及用户测试：交互设计师通过设计原型来测试设计方案。原型可以是实物的，也可以是计算机模拟的，可以是高保真，也可以是低精度的。
交互设计是一门具体独特方法和实践的学科，涉及到了研究、实验、制作、测试等环节，需
要与多领域多背景的人员沟通，可以从传统设计、人机工程学、心理学、数据分析等领域汲
取理念和技术，不断完善，以此作为设计的依据。
什么是图形界面(Graphic user interface-GUI)
在人与机器互动的过程中，有一个层面，即我们所说的用户界面，它可分为视觉、触觉、听
觉等方面，甚至上升到了情感层次。平时大家常见的有计算机操作系统界面(Windows、Mac
OX)，手机操作系统界面(iOS、android、windows mobile)。
其它名词解释
UCD(User Centered Design)
以用户为中心的设计，简单的说，在进行产品设计时从用户的需求和感受出发，围绕用户为
中心设计产品，无论产品的使用流程、信息架构、人机交互方式等，都需要考虑用户的使用
习惯、预期的交互方式、视觉感受等方面。
衡量一个好的以用户为中心的产品设计，可以有以下几个纬度：产品在特定使用环境下为特
定用户用于特定用途时所具有的时效性、效率和用户主观满意度，延伸开来还包括对特定用
户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时整体的心感受等。
Information architecture(IA)
信息架构，它主要是将信息变成一个经过组织、归类、以及具有浏览体系的组合结构，处理
好信息与使用者需求的过程。如我们在设计一个网站的过程中，就需要对网站所传达的信息
进行系统的思考，包含了网站导航、页面布局、内容展示、操作流程等。
Usability
易用性，它指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用
户能否用产品完成他的任务，效率如何，主观感受怎样，它是交互式产品的重要质量指标。
UI 设计点滴
5
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计相关岗位
一般从事互联网产品研发(网站、软件、应用等)的公司，到了一定规模后都会成立 UI 设
计部，满足不断增加的设计需求。这个部门会设立几个工作岗位，各公司在职位上的称呼可
能会有点区别，但基本职责都是差不多的。现在我们就来对比下国内各公司的招聘要求，看
看都需要具备些什么样的能力。
豆瓣
用户研究员
职位描述:
1. 进行易用性和功能分析,对产品原型进行评测
2. 主持用户观察、深入访谈、焦点小组
3. 分析市场需求、对其他产品进行设计分析
职位要求:
1. 能分析使用者的使用习惯、经验和情感
2. 能评估可用性,并转化为具体的改良建议
3. 有很好的倾听、沟通,能跨团队协作
优先条件:
设计、人机交互、心理学教育背景者
交互设计师
职位描述:
1. 和设计、产品、开发团队一起参与前期概念设计,制作故事板、产品原型
2. 根据具体的产品概念,设计功能、流程与架构
3. 提供设计评估,检阅 ui设计,提出建设性的修改建议
职位要求:
1. 熟悉好的交互模型、信息架构
2. 能发展容易使用的使用界面
3. 能提出变通的解决方案
4. 清楚使用者所处的真实环境
5. 有直接、快速的沟通能力,善于合作
6. 简历请附作品(张数不限)
优先条件:
1. 设计、人机交互、心理学教育背景
2. 具有设计可用性web界面的丰富经验者
视觉设计师
职位描述:
1. 为豆瓣新的或已有的产品和功能确立视觉部分 UI 设计点滴
6
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2. 把握设计趋势,提出新的设计及创意策略
3. 有效的平衡网站易用性和美观性
职位要求:
1. 好的视觉感觉
2. 善于用视觉来表达想法
3. 有一遍又一遍观察你的设计的耐心
4. 能感知使用者所看到的
5. 善于沟通,能和团队紧密协作
6. 简历请附作品(张数不限)
优先条件:
1. 美术、设计教育背景者
2. 好的手绘功底者
3. 热爱生活者
小米
UIUE 设计
任职条件
1、本科学位以上，2-5年工作经验；
2、有较强的产品逻辑和文档能力，工业设计或人机工程相关专业背景优先。
视觉设计师-小米电视
岗位职责：
1. 带领团队完成日常的设计工作；
2. 敏锐的行业设计动态与发展方向把控能力；
3. 准确把握产品设计风格，并升级迭代，控制相关创意工作的出品质量，领导团队完成优
秀的设计作品；
岗位要求：
1. 不少于五年平面设计经验或者三年以上终端设备设计经验；
2. 优秀的审美能力，在交互和用户研究方面有一定经验和见解，对可用性有一定认识，有
丰富的设计理论知识和对流行元素敏锐的观察和总结能力；
3. 良好的合作态度及团队精神，善于沟通，富有工作激情及责任感，理解工程师思维，4. 具备和开发工程师愉快的协同工作经验；
5. 掌握常用等设计软件；
豌豆荚
产品设计师
豌豆实验室拥有一个小而精的产品设计师团队，专注于为用户创造简单好用的移动产品。作
为产品设计师，你将参与到产品开发过程中的每个环节，从早期概念探索到发布前像素级别
的问题修正。你将在工作中运用和学习到产品设计、交互设计、视觉设计、用户研究等方面 UI 设计点滴
7
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
的知识和技能。你将成为豌豆实验室一个或多个产品的负责人。
主要职责：
将概念性的想法转化成对用户富有价值的产品
全面负责产品的整个生命周期，从概念到发布的完整用户体验
为产品设计简单优雅的流程和体验
带领不同团队，建造出你心目中的完美产品
参与公司产品战略制定
参与设计评审，和其它设计师一起不断提高我们的设计质量
职位要求：
对复杂事物和系统的洞察力
对视觉和交互细节的高度注意力
对互联网产品策略和愿景的深度思考
有交互设计项目经验，尤其是面向大众用户的大型产品设计经验
对用户体验各专业领域的知识和经验积累
优秀的书面或口头表达能力 (你需要带领团队做出你理想的产品)
够用的原型制作能力
适应快速变化的工作环境
好品味
有能力建造自己设计的东西尤佳
资深视觉设计师
豌豆实验室正在寻找一名资深的视觉设计师，负责定义豌豆实验室所有产品，包括 Windows
版、Android 版、Web 产品的视觉呈现。
主要职责：
全面负责豌豆实验室所有消费者产品的视觉设计工作
为豌豆实验室各产品创造一致的、愉悦的、优雅的视觉体验
职位要求：
交互设计、图形设计、工业设计或其他设计专业领域的学习经历
至少三年工作经验，曾经作为团队核心成员设计出卓越的消费者产品
拥有从零开始，为一个或者多个产品制定视觉设计规范和系统的能力
提供一个 Web-based 的作品集(包括早期探索尤佳)
有能力制定面向消费者产品的设计规范
懂 HTML 和 CSS 尤佳
卓越的设计沟通技巧
腾讯CDC
用户研究工程师
职位要求：
1、人机交互、认知心理学、计算机、设计艺术或相关专业本科以上学历 UI 设计点滴
8
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2、熟悉研究方法论，熟悉一般研究步骤，了解各种研究方法，有坚实的统计和数据分析基
础
3、具有商业头脑，能针对不同项目有效权衡和分配时间，权衡研究投入和收益比率，高效
完成研究
4、较强的沟通能力，能与其他研究员，不同职能的团队协作
5、对互联网行业热情，对业内消息敏感，对市场研究有一定了解
6、良好的英文文章阅读能力，能阅读专业论文，推荐英语6级
工作职责：
1、产品可用性测试
设计体验测试方法，完成计划，进行测试工作和完成报告，给出产品改进建议。
2、用户研究
设计实施各种用户研究，统计分析各种用户体验数据报告，挖掘用户需求及产品使用习惯，建立用户模型；
参与公司前瞻性产品的规划，分析用户需求。
3、体验满意度监测
建立产品满意度指标；跟踪和监督公司产品用户体验满意度改进，提升产品设计质量
交互设计师
职位要求：
1、对各种常用软件有强烈兴趣并有灵敏触觉，富有创造力和激情，并有动手实践的良好习
惯
2、强逻辑思维能力，熟练掌握业务需求分析、产品需求分解的技巧
3、主动性高，具优秀的理解、沟通与协调能力，很强的文字表达能力
4、对电子商务网站和 IM等互联网产品有深入体验经验和理解
5、有一定视觉设计和XHTMLCSS等相关岗位的技术和技能
6、个性乐观开朗，善于和各种背景的人合作
7、有良好的英语阅读能力
8、有大局观，可以在复杂的约束条件下找到平衡或创新的方法
9、对交互设计过程有深入的了解，可以独立完成整个设计过程(对流程图、线框图等等交
互设计方法能熟练应用)
10、工业设计、计算机、心理学、平面设计、广告设计等相关专业本科以上学历
11、如果前9条有足够的资历和资质，请忽略第10条
工作职责：
1、参与产品规划构思和创意过程
2、分析业务需求，并加以分解 归纳出产品人机交互界面需求
3、设计软件的人机交互界面结构、用户操作流程等
4、参与公司前瞻性产品的创意设计
高级视觉设计师
职位要求：
1、本科及以上学历，美术、设计或相关专业本科以上学历(优秀人才，专业和学历可适当放
宽) UI 设计点滴
9
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2、从事设计行业工作 3 年以上，对工具型网站的设计有丰富经验、有成功案例(同时有手
持成功案例的更佳)，对视觉用户研究有一定经验和见解
3、具有深厚的设计理论与娴熟的设计技巧，善于捕捉流行趋势，并能推动团队的设计能力
4、热爱设计，拥有宽广的行业(平面设计、互联网、手持应用)视野与时尚的审美标准
5、具备良好合作态度及团队精神，并富有工作激情、创新欲望和责任感，能承受高强度的
工作压力
工作职责：
1、负责参与产品(网页、手持方向)的前期视觉用户研究、设计流行趋势分析，主导设定
整体视觉风格和VI设计
2、负责日常的运营活动及功能维护提供美术支持
3、负责参与设计体验、流程的制定和规范
4、负责分享设计经验、推动提高团队的设计能力
少年，看了这些招聘岗位及要求，你知道自己在哪个位置了吗，如果想去你心目中的好公司，那就为之努力吧。
UI 设计点滴
10
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计相关工具
工欲善其事，必先利其器。了解到了UI 设计相关工作岗位的任职要求后，我们可以就其中
所涉及到的工具做进一步的了解，之后无论是在原型设计上，还是视觉设计上，选择适合自
己并能与团队很好沟通配合的工具，做到事半功倍。
1. 原型设计工具
Power Point(PPT)
PPT 在很多人的印象中就是制作幻灯片的工具，但它在某些交互设计师的手下却是制作原型
的利器。毕业后工作的第一家公司里，交互设计师用 PPT 制作出了艺术级的交互流程图，开发和测试都按照这个流程来工作就行。当时设计的是一款电阻触屏直板手机，内部代号为
HaiLing，分享几张截图。
3.1 版本历史
3_2 硬件定义 UI 设计点滴
11
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_3 开机
3_4 主界面及状态栏
Microsoft Office Visio
它是微软办公套件中的一款，主要用于各种图表的制作，内有很多现成的控件，也可以自定
义图形。我一般都是自己画图形，满足自己的审美需求。下面是用 Visio 绘制的交互图： UI 设计点滴
12
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_5 登录注册
UI 设计点滴
13
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_6 浏览查看
Axure RP
Axure RP 是一款专业的原型设计工具，能够快速制作出网站的线框图、流程图等，并进行
相应的交互。最新版中还加入了手机、平板的设计模块，极大地满足了产品经理、交互设计
师的工作需求。
UI 设计点滴
14
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
Balsamiq Mockups
Balsamiq Mockups出自加利福尼亚州的 Balsamiq工作室，创始人 Peldi在2008年 6月推出了
这款手绘风格的产品原型设计工具， 之后迅速成为产品设计师绘制线框图或产品原型图的利
器，最新版本中有 77 个定义好的控件，无论你是设计桌面应用、Web 应用还是手机应用，它都能提供相应的支持。 UI 设计点滴
15
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
3_9 Desktop Apps
3_10 77 Built-In Controls UI 设计点滴
16
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
纸和笔
在各原型设计工具中，纸和笔其实是最重要的，它能够让你随时记录灵感，并把想法快速表
现出来，向他人展示，面对面的沟通，实时修改。
以上介绍的都是大家常用到的原型设计工具，一些小众的没有涉及到，如果有兴趣，Google
上输入“原型设计工具”就可以搜索出很多。下面我们介绍一些视觉设计相关的工具。
2. 视觉设计工具
Photoshop、Illustrator
这是 Adobe 旗下最著名的两款图形设计软件了，Photoshop 绝对是视觉设计的主力军，市
面上相关的教程书籍可以用汗牛充栋来形容了。 Illustrator 在 UI 设计中常用于图标的绘制，很多设计师都为画出很棒的写实图标而在此软件上下了一番功夫。
Flash、After Effects
Flash 早已过了全民闪客的年代，但在 UI 设计领域，它还被常用于动态效果的演示制作。
After Effects 为人熟知是在影视后期制作领域，但在 UI 设计里，为了向他人演示设计师所
构思的交互，After Effects 被光荣地引入。
3D Max、Maya、Zbrush
这三款都是 Autodesk 旗下著名的三维软件，用于建筑、动画、CG 创作等领域。在视觉设
计师的手下，它们是制作 3D 图标的利器，特别是 Zbrush，它可以让你在屏幕前进行雕刻，生动地刻画出图标的细节。
3. 思维导图工具
Mindjet MindManager
这是一款优秀的思维导图和知识管理工具，能够帮助你将想法和灵感以清晰的思维导图的形
式记录下来，这对梳理工作计划和规划很有帮助，广泛应用于研究、组织、解决问题和决策
中。在 UI 设计环节，我们可以用它来很好地整理产品需求、划分结构、建立菜单树等。
4. 标注工具
MarkMan-马克鳗
它是一款设计稿标注、测量神器，可以横向、垂直标注和测量元素的长度，自动读取标记所
指的元素的色值，标记某点的位置，甚至直接在上面添加文字说明。
UI 设计点滴
17
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计资源介绍
UI 设计已经发展了一段时间，这期间也积累了许多可供学习的资源，下面就介绍一些个人
在学习过程中所看到的资料。
设计规范文档
iOS Human Interface Guidelines
iOS 人机界面设计指南是苹果官方为开发者和设计师准备的一套规范文档，包含了详细的设
计原理、UI 元素、图标和界面设计要求等。它是 UI 设计师或开发者开发应用的必备文档，从可以从苹果开发者网站上下载英文版，也有国内的团队进行了翻译。
https:developer.apple.com
Android Design
这是 Google 为Android 开发者和设计师制定的一套规范文档，经过了数过版本的更新，现
在已经越来越人性化了，同样可以从Android 开发者社区下载。
http:developer.android.comdesignindex.html
User Experience Design Guidelines for Windows Phone
这是微软为 Windows Phone 出的一套设计规范，详细地说明了他们的设计语言，与 iOS 及
Android 对比起来阅读，发现它们的相同点与不同点，思考为什么这样设计，这对于个人
UI设计的提高是很有帮助的。
http:msdn.microsoft.comen-uslibraryhh202915(v=VS.92).aspx
相关书籍
设计心理学 Donald Norman 著
很早以前就出版的书籍，里面介绍的一些方法可能有点过时了，但它可以培养读者有设计心
理的意识，知道处处留心。
世界现代设计史 王受之著
本书对世界现代设计史的源流、发展及现状进行通论式的阐述，描述世界现代设计史上的各
个时期重要流派、重要人物、重要作品，展现世界现代设计史的基本轮廓、构建基本框架。
用户体验要素 Jesse James Garrett 著
本书用清晰的说明和生动的图形分析了以用户为中心的设计方法(UCD)来进行网站设计的
复杂内涵，并关注于思路而不是工具或技术，从而使你的网站具备高质量体验的流程。
中国字体设计人：一字一生 廖洁连著
这本书从历史的角度解读了印刷字体，从形制、体制到印制的演进过程，以及对中国文化、经济、科技和人们生活产生的影响。还可以了解到一九四九年来中国政府对文字改革和字体
设计的关注与投入，及全国仅有的做字单位 “一所三厂”不断尝试改革的成功与失败。 本书
更专业地陈述字体设计的艺术规律和知识，让读者认识到字体设计人，以及他们从事的艺术
活动的价值，认知到文字的审美和功能应用，使人们对汉字之美有全新的理解。 通过对这
十几位字体设计师的采访纪实，我们可以看到他们作为个人，映衬出新中国印刷字体发展进
程的历史轨迹。读过此书，才懂得感激文字，敬畏文字! UI 设计点滴
18
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
浪潮之颠 吴军著
从一百年前算起，ATT 公司、IBM 公司、苹果公司、英特尔公司、微软公司、思科公司、雅虎公司和 Google 公司都先后被幸运地推到了浪尖。虽然，它们来自不同的领域，中间有
些已经衰落或正在衰落，但是它们都极度辉煌过。本书系统地介绍了这些公司成功的本质原
因及科技工业一百多年的发展。
相关网站
www.dribbble.com
www.behance.net
www.pixeden.com
www.smashingmagazine.com
www.uiparade.com
www.pinterest.com
www.huaban.com
www.lovelyui.com
www.pttrns.com
www.mobileawesomeness.com
www.500px.com
www.uisdc.com
UI 设计点滴
19
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
计算机操作系统界面发展史
图形用户界面的发展从来都是与计算机操作系统的更新密不可分的，它们就像一对两小无猜
的朋友，相互依偎着成长，不断散发出迷人的光彩，在不知不觉中影响着人们的工作与生活。
细细数来，从1973 年第一代图形用户界面的呱呱落地到今天百家争鸣，图形用户界面已经
走过了 40 几年的发展历程，步入不惑之年的它更加成熟稳健，带给我们更丰富的体验，为
我们提供了更加人性化的服务。现在就让我们以时间为主线，坐上时光机，一起聆听图形用
户界面这位朋友所谱写的光阴的故事。
1973
1973 年 4 月，Xerox PARC (施乐公司帕洛阿尔托研究中心)研发出了第一台使用 Alto 操作
系统的个人电脑，Alto 首次将所有的元素都集中到现代图形用户界面中，它相当小，但却
有着强大的处理图像信息和分享信息的能力，拥有“所见即所得”的文档编辑器，内置了大
量的字体和文字格式。另外，Xerox PARC还开发了一种名为 Smalltalk的程序语言和环境，它拥有自己的 GUI 环 境 ( 包 括 了 弹 出 菜 单 、 视 窗 、 图 标 )。
4_1 Alto
很长一段时间内，图形用户界面的火种都保存在 Xerox PARC 这个神殿内，不为外界所知，但它在等待，等待着那个盖世英雄身被金甲圣衣，脚踏七彩祥云来迎娶它。
1981 UI 设计点滴
20
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1981年 6月，Xerox推出了 Star，Star于1977年开始研发，它延续了 Alto的概念，在硬
件上做了一些升级，384KB 内存(可扩展到1.5M)，1024768的黑白分辨率，两个按键的鼠
标(原来是 3 个按键)，最重要的是拥有桌面软件，支持多语言，能够连接文件服务器、邮
件服务器和打印服务器。可惜的是，Xerox Star 是一个完全封闭的系统，不允许人们应用
系统之外的其它程序语言和开发环境，这也意味着它不支持第三方软件。
4_2 Star
1983
火种终于等到了它的盖世英雄。1983 年 1 月，苹果公司发布了 Lisa 办公系统，结合 Lisa
硬件、操作系统、办公软件，苹果公司设计出了一款强大的文件处理工作站。它最大的亮点
是支持3.5英寸的软盘，能够最小化、关闭窗口，复制文件等。这其中有个有趣的故事，当
年史蒂夫乔布斯在参观 PARC时看到了运行于Alto的Smalltalk，他是个有心人，回去之后
就抓紧开发出了更健全的系统，不仅拥有Smalltalk 的GUI环境，还增加了下拉菜单、桌面
拖曳、工具条、苹果系统菜单和非常先进的复制粘贴功能。
4_3 Lisa
1984 UI 设计点滴
21
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1984年苹果公司乘胜追击，发布了 Macintosh，它已经有了现代操作系统的一些特点，当插
入磁盘时可以直接在桌面上看到，方便存取文件。双击磁盘图标，打开一个文件窗口，同时
伴随着缩放效果。文件和文件夹都可以被拖曳到桌面上，还可以通过拖曳来拷贝或移动文件。
默认状态下文件夹以图标方式查看，它还可以根据文件大小、名字、类型或日期来排序，通
过点击图标下面的名字，我们可以输入新的名称来对文件重命名。
4_4 Macintosh
1985
1985年注定是不平凡的一年，Amiga一经发布就引领时代，它包括了高色彩图形、立体声、多任务运行等特点，这使得它是一款极好的适合多媒体应用和游戏的机器。
4_5 Amiga
同年8月，微软的Windows Version 1.0终于杀将出来，为这激烈的竞争市场增添了几分火 UI 设计点滴
22
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
药味。它可以在一个窗口中同时运作几个Dos程序，在一个对话框中呈现选项按钮、复选框、文本框和命令按钮，记事本上甚至可以显示文本缓存中还有多少空间剩余。
4_6 Windows Version 1
1986
1986年苹果公司状告 Digital Research，因为 GEM桌面系统实在太像苹果公司的 Macintosh
了，为了应对苹果公司的官司，Digital Research消弱了桌面程序，GEM中最大的变化是拥
有了两个文件窗口，不再有桌面图标，窗口大小也不能缩放，”Desktop”菜单放置在了右
边，两个窗口可以相互独立地浏览文件，要回到另一个窗口只需单击文件夹的系统框。
4_7 GEM
1987 UI 设计点滴
23
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1987年4月，苹果公司发布了 Apple Macintosh II，第一代彩色Macintosh，拥有 24位可
用颜色样本。
4_8 Macintosh II
同年，三年磨一剑的微软发布了 Windows 2.0版本，它采用了 386增强模式，允许使用超过
640K的内存，在窗口管理上有了显著的提高，可以自由重叠窗口，在屏幕上自由地缩放和
移动窗口，甚至最大化或最小化。
4_9 Windows 2.0
1988 UI 设计点滴
24
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1988年9月，苹果公司发布了 GSOS，一个16位的操作系统，它在屏幕顶部有一条单独的
菜单栏。
4_10 GSOS
10月，NeXT计算机发布。NeXT是由苹果公司的创办人史蒂夫?乔布斯，于 1985 年被苹果公
司辞退后同年成立的。NeXT计算机是工业设计者的一个重大胜利，未来主义的 black cube
和高分辨率的显示器，一个图形界面和一个叫作NeXTStep 的操作系统。1996年，苹果公司
买下了NeXT并把Jobs 请回苹果帮助运营公司。
4_11 NeXTStep
1990 UI 设计点滴
25
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1990年5月，微软发布了Windows 3.0，这一时候，他终于意识到了图形用户界面的的无限
潜力，并着手进行了较大的改进。命令按钮和窗口控制条有 3D效果，操作系统本身支持标
准模式，以及使用了超过 640KB内存和硬盘的386增强模式，从而能使分辨率更高，图形显
示更好。
4_12 Windows 3.0
1991
1991年，Mac OS version 7.0 发布，它是一款支持色彩的Mac OS图形用户界面，图标增加
了隐约的灰色，蓝色和黄色阴影。
4_13 Mac OS version 7.0
1992 UI 设计点滴
26
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1992年3月，微软发布了Windows 3.1，这一版的Windows预装了TrueType字体。这首次
使Windows成为可以用于印刷的操作系统。早先，实现这种功能的唯一办法是在 Windows 3.0
中安装Adobe的字体管理器。该版本同时包括一个名为 Hotdog Stand的配色方案，包含亮
红色，黄色和黑色。该色彩方案主要是为了帮助一些患有一定程度色盲的用户，使其更容易
看清楚屏幕上的字体和图形。
4_14 Windows 3.1
1995
1995年8月24日，微软发布了 Windows 95，对图形用户界面进行了重新设计，首次在每一
个窗口上都添加了小小的关闭按钮。设计团队为图标和图形设计了各种状态(启用，禁用，选定，停止等)，著名的“开始”按钮也首次出现。这对于微软操作系统本身和统一的图形
用户界面而言，都是一个巨大的进步。
4_15 Windows 95
1996 UI 设计点滴
27
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1996年IBM发布了OS2 Warp 4，它为这位蓝色巨人挣足了面子。你可以随意创建文件或文
件夹，有一个类似于Windows 回收站和Mac OS的垃圾桶的碎纸机。每一个文件夹都可以设
置单独的背景，背景可以在中间、平铺或自适应窗口的大小，文字和背景都可以改变颜色来
增加阅读性。
4_16 Warp 4
1997
1997年7月，Mac OS 8破茧而出，这距史蒂夫?乔布斯 1996年重回苹果公司时只过去了 1
年的时间，苹果公司重燃战火，两周之内卖出了1.25 亿份拷贝，成为当时最畅销的软件。
Mac OS 8也允许用户设置背景图片，而不仅仅是单一的黑白样式，用户甚至可以从他们的
文件夹中选择图片来进行设置。
4_17 Mac OS 8
1998 UI 设计点滴
28
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1998年6月25日，微软发布了 Windows 98 ，IE浏览器代替了Windows shell，桌面右边
放置了广告，界面允许使用超过 256色来渲染， Windows 资源管理器几乎完全改变，同时“活
动桌面”也首次出现。可是，经过了 13年的发展，Windows的记事本还是不能编辑超过 60K
字节的文本文件。
4_18 Windows 98
7月12日，KDE 1.0发布，KDE 是为UNIX开发的一个网络公开的桌面环境。KDE希望通过提
供一个与MacOS和Windows95NT类似的桌面，填补Unix对更易于使用的桌面操作系统需求。
它是一个完全自由开放的计算机平台，任何人可以自由使用或修改其源代码。
4_19 KDE 1.0
1999 UI 设计点滴
29
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1999年3月3日，GNOME 1.0 发布，它主要是为红帽 Linux和以后的其它Linux 系统开发
的。屏幕底部的面板上排列了常用的程序图标、一排窗口列表和时钟。
4_20 GNOME 1.0
2000
2000年1月5日，苹果公司宣布他们设计出了全新的Aqua界面，并将用于公司新推出的MacOS
X操作系统中。在此界面中，默认的32 x 32和 48 x 48 的图标被更大的128 x 128平滑的
半透明图标取代。Dock上放置了常用的程序图标，鼠标经过时会显示程序名称。当窗口最
小化后，在Dock上显示的不是程序图标，而是程序窗口的缩略图。Aqua界面最大的变化是
涉及到了渐变、背景样式、动画和透明度的应用，有着更好的用户体验。
4_21 Aqua
而此时的微软正在 Windows Me 和 Windows 2000 中挣扎，在图形用户界面上没有太大的突 UI 设计点滴
30
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
破。
2001
2001年10月25日，微软终于不甘示弱地发布了拥有全新用户界面的 Windows XP，该界面
支持更换皮肤，用户可以改变整个界面的外观和感觉，默认图标为48 x 48，支持数百万种
颜色。
4_22 Windows XP
2002
2002年，KDE3.0发布，相比于 KDE 1.0版本，KDE桌面环境有了显著的提高，所有的图形
和图标都更加的完善，拥有了更统一的用户体验。
4_23 KDE 3.0
UI 设计点滴
31
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
2003-2007
这几年里，从外界看来，微软一直都在维护 Windows XP、Windows XP Professional 的更
新，在界面变革上没有太多的动作。苹果则开始了对 Mac OS X 的一系列升级，并且都以猫
科动物的名字来命名，在界面设计上不断优化，一次次引领时代潮流。
2007
2007年1月30日，经过了漫长的等待，微软终于揭开了 Windows Vista的神秘面纱。这款
操作系统是微软为了应对其竞争对手而发布的，包含了很多 3D效果和动画。自 Windows 98
以来，微软一直试图改善其桌面，在Windows Vista中，微软用了桌面小工具取代了活动桌
面。
4_24 Windows Vista
同样是在这一年，苹果公司发布了第6代 Mac OS X操作系统Mac OS X Leopard ，再一次
改进了用户界面。基本的界面仍为 Aqua和水晶滚动条，加入了一些铂灰色和蓝色，3D dock
和更多的动画及交互使得新界面看上去有着更丰富的 3D效果。 UI 设计点滴
32
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
4_25 Mac OS X Leopard
2008
2008年GNOME升级到了 2.24版本，它在主题和艺术性投入了大量的精力，其目标是“使电
脑看起来更完美”。
4_26 GNOME 2.24
2009
KDE在2008年1月升级到4.0版本后高歌猛进，于 2009年3 月发布了KDE V4.2。这一版本
在图形界面上加入了很多新的东西，如动画，平滑，高效的窗口管理和对桌面小工具的支持。
图标更为逼真，大小也很容易调整，几乎可以随意配置每一个设计元素。最明显的变化在于 UI 设计点滴
33
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
增加了一些新的图标，主题和声音，这些都是由Oxygen Project提供的。相比于早期的版
本，这绝对是一个巨大的飞跃，而且现在它还可以在 Windows和 Mac OS X上运行。
4_27 KDE 4.2
2009年10月23日Windows 7 全球同步上市，它拥有非常简单、快捷、吸引人的特性。具
体表现为，高效快捷的方法查找和管理文件，例如Jump List和改进的任务栏预览，提高工
作效率；快捷、可靠的性能，意味着电脑使您得心应手；更多功能(如 Windows 媒体中心和
Windows触控功能 ) ，使很多流行数字化应用成为可能。
4_28 Windows 7
2010
2010年10月，代号为“Lion”的Mac OS 10.7首次公开，它将 Expose、 Dashboard 与 Spaces
的功能整合而成的“Mission Control”，在iPad和iPhone上面常见的“ App Store”也 UI 设计点滴
34
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
加进来了，此外软件终于可以全屏运行了。从Lion系统开始，苹果逐渐将iOS 上面的成熟
经验软件、以及新的软件管理启动接口“Launchpad”。此外， Lion 是自从苹果发布 iPhone
以来，第一次将 iOS 上的使用经验转移回 Mac 平台上的尝试。
4_29 Mac OS Lion
2012
2012 年微软公司推出了 Windows 8，采用了全新的 Metro 风格，除了适用于笔记本电脑和
台式机平台的传统窗口系统显示方式外，还特别强化了适用于触控屏幕的平板电脑设计，吹
响了反击 iOS 和 Android 的号角。
UI 设计点滴
35
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
4_30 Windows 8
同年，苹果发布了Mac OS X Mountain Lion，更多地引入了 iOS 的功能特色。
4_31 Mac OS X Mountain Lion
2013
苹果于2013年6月10 日公布了OS X Mavericks，并在 2013年10月22 日起。从
这个版本起，苹果公司不再以大型猫科动物来为其操作系统命名，改为采用美国加州的地名，“Mavericks”一名来自加州一个同名的冲浪地点。
4_32 OS X Mavericks
UI 设计点滴
36
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
MarkMan 作者专访
受访：陆文进 采访整理：吴启文
编者按：在写[UI 设计相关工具]这篇文章时，介绍了设计标注工具 MarkMan，在网上搜寻
作者的相关信息，少之又少，于是动了采访作者的念头，邮件联系之后，我发现了一个很有
意思的人，看到软件作者背后的小小世界。当然个人不太同意文进对于“工匠”的理解，就
这个问题我们有过私下的讨论，很愉快的一次谈话。
1. 请问你现在处于什么样的工作状态中？
现在正在用自己的积蓄创业。
全职创业最早是从11 年3月份开始的，那时候团队有 5 个创始人，都是之前迅雷的同事，还是平分股份的(现在想想就不靠谱)。结果，1 个月不到就走了一个；3个月不到，第一个
产品发了以后，又走了一个；11年10月份的时候，又走了一个。后来就稳定下来了。
13 年 6 月时正式成立公司，现在还很小，我们招人也很谨慎，除我和另一个创始人之外，还有1 个全职员工和1 个兼职员工。现在已经盈利，不过还在不断摸索更强力的现金流产品
(我们是很务实的，自己养活自己先)。
除了我之外，小伙伴们都是工程师，不过，其实我的主要工作也是写代码，偶尔还做做设计。
与其说我是产品经理或者工程师什么的，我更喜欢这个称呼“工匠”。
因为团队小，也没有那么多的流程。产品问题的话，基本上不会抽出专门的时间去考虑，都
是从平时积累的需求列表中找一个最醒目的来做。基本上一个需求讲解一下就开始做了，需
求点拆得比较小，所以也没有文档(偶尔会画个原型图就算是大需求了)，一边做一边调整。
大家也都磨合得比较好了，小伙伴们在开发过程中的需求确认点也找得很准，很少改需求(根
本就没有详细需求好吧……)。
产品的版本周期很短，不是首发版的话，有时一天发几个版本。如果一个需求要做一周以上
的时间，我就会觉得异常焦虑。
公司规定的工作时间是周一到周五，每天9 点到晚上 6点。不过，最近一段时间工作比较紧
张一点，都是从早上9点到晚上10点，每周工作6天。
不过对于我来说，还是周一到周六比较轻松，周日的话反而不知道有什么事情可以干了，觉
得无聊得很。
总的来说，是处于工作狂buff 中。
2. 你是如何理解“工匠”这个词的，在我看来，它更是一种做事的态度与精神。
说到工匠，我脑子中浮现出来的都是一些传统的手艺人，比如 “木工”、“铁匠”、“铸剑师”
等。 UI 设计点滴
37
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
对于他们来说，自己要为产品的“方方面面”负责。
功能不好，是自己的创造力不行，做的难看，是自己审美观不行，做的质量差，是自己技术
不行。
如果任何一方面是必须要交给其他人做的，那就不是工匠。
当然也可以想象工匠之间也有合作，能力也有侧重。但是前提是一个人也行。
在做软件产品的时候，就得懂产品、懂设计、懂技术。
P 得了 S，切得了图，写得了 C++，搭得了服务器，起码不会的时候第一想到的是自己去钻
研和尝试，而不是“谁来搞一下”。
总结一下就是，“工匠”有一种想为产品方方面面负责的态度和精神，加上能为产品方方面
面负责的能力。
3. 是在什么样的情况下想到做 MarkMan 这个产品的，现在在这个产品情况如何？
做MarkMan的时候，我还在上海的一家不知名的公司全职上班。
那时是突然想到，设计师在设计稿上面有时候会画上长度标记供开发人员参考，就好奇这个
是怎么做的(心里想：不会是一笔一笔画的吧)，问了几个设计师，竟然还真是一笔一笔画
的。
然后我就怀着无限的同情，一边学AIR开发，一边做，没有睡觉，花了一个通宵做了个 MVP
出来。虽然当时界面很丑，功能很简陋(只能标长度)，但发到微博上面去的时候，就已经
很受广大设计师同学们的欢迎了。
后来就根据大家的反馈，慢慢优化，多加了几种标记，承蒙之前在迅雷的2位设计师在设计
上的大力而且无偿的支持，做成了现在这种比较拿得出手的样子。
其实做马克鳗的过程在我们团队还是比较典型的，就是发现问题，找到解决方案，迅速做出
MVP，吸收反馈逐渐优化。
我们对于一个 idea 一般不会论证太长时间，觉得有需求，而且念念不忘，就会找时间快速
做出来。
马克鳗一直以来都是比较健康地在自然增长的，用户虽然不多(现在每天大约1500人上线)，但每个月都有看得到的增长，而且增长的趋势没有慢下来。尽管我一直以来都没有特意做什
么推广。
4. 你大学时学的是工商管理，是什么样的机缘使你转向互联网，还到迅雷做了产品经理？
我身边的人，更多的是会问我为什么大学要去学工商管理，呵呵
从小到大，一直都是一个技术宅，小学三年级的时候，从家里翻出一本关于 Basic(一种面
向初学者的编程语言)的书，虽然没摸过电脑，但还是很有兴趣地看了半夜。
UI 设计点滴
38
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
97 年读初一，那时家里买了电脑，当然主要是拿来玩游戏的。不过也因为喜欢玩游戏，所
以就想自己做一个(应该不少人都有这种想法吧，哈哈)。于是就开始自学编程。不过那个
时候信息实在是太匮乏了，不像现在，想要了解什么 google 一下就都有了(抱歉百度还做
不到)。结果也没怎么学进去，那个时候太小，很多概念都没法理解，比如函数的概念对于
我来说就是一个无法逾越的障碍，更不要说指针什么的了。
不过学了还是有一点用处的，上电脑课的时候，当同学们还在尝试让屏幕显示“hello world”
的时候，我已经在让电脑在全屏幕上随机生成彩色线条了，那个时候看起来非常炫，也换来
了妹子们崇拜的眼神(也只限于眼神而已)。
后来高一的时候，家里装了网络，就是电话线拨号，最高下载速度5KBs，电话拨进来要断
线的那种。我爸那时候在卖收藏品，于是怂恿我帮他做一个卖收藏品的网站，说通过网站达
成的交易，给我提成。
于是我就开始学怎么做网站。
刚开始是做纯 HTML 的静态网站(那个时候还没有 cssjs)，其实也简单，用 dream weaver
拖拖拽拽就出来了。
后来发现不行，太累了，很多内容都是重复的(比如详情页)，于是从高二起就开始研究怎
么用程序来做，于是就学会了怎么用 ASP(有一段时期，ASP和 PHP还是平起平坐的，现在
完全没落了)来做动态网站。这大概是我第一次做出完整的产品。
整个初中和高中时期，我基本上都是班里所谓的“电脑高手”，那个时候也完全没有分工的
概念，如果要做一个东西，就全都是你来。所以那个时候自学了很多东西，比如为了破解
H-Game 的存档，去学了一下汇编(未遂)，为了参加一个奥运主题的 flash 设计比赛，自学
做flash动画等等。接触面是比较广，但是都不精。
至于大学为什么要选择工商管理，其实是两个因素搀和起来的。一方面是高三的时候被几样
东西洗脑了，一个是《穷爸爸富爸爸》这本书，一个是余世维的关于管理的讲座，还有就是
一些成功学的书，觉得做商人做管理太帅了。另外一方面就是，我自己也觉得自己太内向了，也希望让自己将来能变得不一样一点。所以最后就报了文科类的工商管理专业。
虽然报的是工商管理专业，但平时一点都不像这个专业的人。平时还是做我的技术宅，学学
技术，有时小试牛刀做些小工具小网站。当然，主要的时间还是和多数宅男一样，玩游戏，看片，(试图)交女朋友。
当时找工作之前我是很担心的，因为像我这样一个人，虽然懂一些技术，但是和技术专业出
来的人没法比(其实现在回顾来看，当时还是有竞争力的)；工商管理专业方面的话，也学
得很一般；社会实践也很少。
有一次，在看招聘帖的时候，突然看到了微软的招聘，看下来有一个职位叫Product Manager，我一看需求，卧槽，这不说的就是我嘛。原来我最适合做的就是产品经理啊。那时候我才知
道了我的定位。 UI 设计点滴
39
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
于是后面就好办了，我自己想好了，要去一家互联网公司，不能太大，否则没有发挥的空间，而且要有上市潜力的(暴发户谁不想做啊)。很自然，最后就做了迅雷的产品经理。其实我
的职业生涯是从小学时候开始的。
5. 是否可以谈谈在迅雷的这段工作经历？
我是07 年进的迅雷，当时考虑的是进一个有潜力的小公司，这样比较有成长和发挥的空间。
可以快速培养能力，并且利用公司资源试错。如果能上市，还能为创业积累一些启动资金。
是的，身为一个浙江人，创业的种子在很小就被种下了。
进了迅雷以后，除了上市，其他都很符合我当初的期望。
刚进入迅雷时，Web2.0 概念刚起来没多久，所以当时成立了一个社区事业部，我刚进去的
时候就在里面。那时候多是打打杂，做做后台项目的需求，这个阶段基本上就是练基本功，了解怎么写文档、做原型图、和各方沟通。
后来大概是08年的时候，视频事业部(部门名字经常变，不一定对)，因为要推广迅雷看看，所以成立了一个“网视联盟”，让站长把看看的片源很方便地嵌入到自己的网站上，而且还
能得到佣金。
因为缺少产品经理，而且我又没什么重要的事在做，所以我就过去了。
这是我在迅雷做的第一个面向用户的产品，而且是独立负责。当时每周都有百分之几十的播
放量增长，非常爽。
不过没过几个月时间，迅雷联盟那边的部门(简称“联盟”)不爽了，把网视联盟的产品要
了过去，当时联盟那边有一个比较强势的产品经理，所以他们只要了产品，没要我。
我对这种明抢的行为，愤愤不平了好几天，甚至联盟负责人来找我沟通的时候，我都没给好
脸色，真心是把产品当自己的孩子了，哈哈。
但大概过了一两周时间，联盟发现还是需要我，于是我就到了联盟那边继续做我原来的产品。
到了联盟之后，大家相互之间也没有了“敌意”，我很快融入了进去。产品的播放量蒸蒸日
上。不过依然好景不长，半年后，公司的法务部门介入了，说这个产品不能搞了，看看只是
有权在自己的网站上面播放授权的视频，不能嵌入到其他网站上面去。就是这么简单，做了
近1年的产品只能说再见了。
后来就继续做了一些面向站长的联盟服务，比如 网站统计(类似cnzz，51la)，但是这个项
目后来因为钱景不明+开发人员少，在第一版发布之后，就无力更新了。我也第一次认识到
了，即使是以烧钱出名的互联网行业，光赚用户不赚钱的行为也是持续不久的。那之前我天
真的认为，有用户就等于有钱。
大概到 09 年的时候，视频这一块又有了一个新的思路，那时候有一个很好的参考对象“快
播”，凭借迅雷的 P2P 的播放技术，可以抢占快播的市场。于是成立了“GVOD 迅播”项目
组，由于跨越了视频和联盟两个事业部，再加上之前我有相关的经验，所以我就顺理成章地
成为了项目经理(职务比产品经理更全面)。 UI 设计点滴
40
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
做了这个项目经理之后，我才真的有一种 hold 不住的感觉。播放流畅性问题问题，要去视
频部门找开发；给站长带量问题(站长做 gvod，迅雷的狗狗搜索引擎会给站长带量)，要找
搜索部门沟通；还要联系好站长系统源码的开发者，让他们提供集成；还要时刻关注法务问
题；每天就是在各个部门之间奔走沟通。
那个时候迅雷已经有大几百人了，公司一大，相互之间配合和沟通就变得困难了，每个部门
还都有自己的考量，各种问题都会暴露出来，并且推进很慢。
所以进小公司就是这样，会有独立承担大项目的机会。大公司就可能连搞个主题活动，都得
有N 个产品经理合作。
最后，这个项目在 09 年互联网的冬天中，为了节省公司开支(需要按照播放量给站长支付
佣金)，终结了这个项目，我又无所事事了。
之后，因为视频部门的需要，我又回到了视频部门，做了差不多 1 年的“迅雷影音”(现在
叫迅雷看看播放器，但我还是喜欢之前的名字)的产品经理，这段时间做的还是比较纯粹地
产品经理。在10年中开始，又去会员部门负责了几个产品。在10 年的下半年觉得没什么意
思了，就离开了迅雷，怀揣 3万的积蓄，准备创业。
总的来说，在迅雷这几年，除了收入低了点，其他都不错。
经历上比较丰富，能力的锻炼也比较充分，老大们人也都很好。
6. 创业到现在，都做了哪些产品，怎么在市面都很少看到(或许是我寡闻了)
我们产品上做过很多的尝试，创业以来，做了不下10个产品，涉及的领域也比较广。
另外我们很少做面向大众的产品，都是以一个比较专业的领域作为切入的。
不过多数产品都是做出来以后市场反馈不佳，或者我们自己不满意，最后就停止运营或者放
着不管了。
其实最主要的原因是我们做的还不够好，所以大家没听说过。
这里稍微选取几个产品：
1、F5(www.getF5.com)：是一个面向Web开发人员的工具，最主要的功能是在保存代码的
时候，实时地刷新网页，减少开发人员频繁切换窗口按刷新的操作。这个是一个收费软件，也是作为我们卖软件收费的一个尝试，不过收入大概只有一个月几百，所以暂时也没有维护。
2、随手背四级(ios)：是一个极简的背单词软件，所有单词解释都是经过人工提炼(以减
少记忆成本)，例句都是人工筛选，背的时候只需要选择记得和不记得就能自动按照记忆曲
线帮你安排复习节奏。在 appstore 上可以下载到，不过放出去以后用户留存率很低，所以
暂也没有后续维护。
3、淘密探(www.taomitan.com)：是一个面向淘宝卖家的服务，可以打探任何一个店铺的月
销量、销售额、畅销产品排行。不过这个产品一直无论怎么做用户量都很稳定(怎么做都不
增不跌)，后来有更重要的项目做了，所以就放着没管。
当然还有马克鳗，这个就不多说了。
可以看出来，我们产品选取的切入点都比较小众，我们认为只有这样才能快速迭代(不仅仅
是版本的迭代，而且是不同产品的切换)。
UI 设计点滴
41
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
现在主要的盈利产品不太方便透露，这里不具体说了，但选取切入点的思路是一样的。
7. 在公司中，你的精力怎么分配？
作为一个创业小团队，每天的事情基本都是围绕产品的。
首先，我的职能是产品经理，我会确保每个产品都有一个按优先级和依赖关系排列的需求列
表(在trello上)。好确保开发的小伙伴知道，下一件最重要的需求是什么，不至于空等。
其次，我们团队目前没有专职的视觉和交互设计师，所以多数情况下我会把涉及到界面的部
分用visio画好原型图，或者直接用HTMLcss做出重构稿，做web的话多数都是用现成的框
架，所以需要设计的部分也不多。
然后，有些产品有客服 QQ和官方微博，我会全天挂着客服 QQ和官方微博，时不时地 check
一下，是不是有用户需要跟进，如果有技术问题会先过滤一下，再交给开发跟进。
如果时间还有多的话，我就会从去求列表里面找一个还没人认领的需求，做一下开发。
不过多数的时间还是在写代码。
有人可能会觉得，你作为产品经理，为什么不做好本职工作，花时间写一下详细的需求文档？
其实理由很简单，我们发现，没有需求文档的时候，产品推进更快，产品质量更高。
8. 虽然我不是投资人，但还是想问一下，当你所做的产品有大公司跟进时，你会如何应对？
我想这个恐怕没有统一的应对策略，只能见招拆招。
但真到那一天的时候也不用过分悲观，因为：
1)大公司不一定会足够重视(狐狸追兔子只是为了报餐一顿，兔子逃跑是为了活命)
2)大公司没有小团队灵活(小团队1 天发几个版本，随时加班)
3)还可以卖给大公司或者他们的竞争对手
4)投资人，你再多投点
话说，大概马克鳗 MVP 发布 1 个月以后，腾讯发布了他们的 Dorado 标记软件。然后很快，马克鳗发布更强大1.0版本，并且赢得了民意。然后，Dorado就没有声音了……
不过，我们立项之前，一般都会考虑是否会有大公司关注，是否会被秒杀，如果这种可能性
很大的话，就尽量不做这种项目。
我们还有一个产品叫“我们来记账”，是一个移动端的产品，可以方便朋友们出去腐败的时
候记录开销(经常出去腐败，一般都是轮流给钱，但是每次参与的人都不一样，容易算不清
楚)。后来考虑到如果这种产品即使好了，很多人用，到时候支付宝钱包之类的客户端出一
个类似插件，我们就被秒杀了。后来就没有继续做下去。
UI 设计点滴
42
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
对于创业团队，尽量选择比较小的利基市场，一年赚 300万，对于大公司来说，根本看不上，对于3 人团队来说，还是可以的。先活下去，在去实现更大的理想。
9. 你是怎么理解合作精神的？
时刻把团队目标放在第一位。
10. 对于公司的、个人的未来有何法或规划？
公司的话，希望能找到一个强力的设计师的加盟，设计是我们的短板。
规划的话，我知道现在不是做长远规划的时候，唯一的规划就是多做赚钱的产品，以及让产
品多赚钱；等到我们可以每天光喝茶聊天也不担心房贷的的时候，就可以做一下长远的规划
了。
我个人的话，对现在的生活状态还挺满意的。将来希望有资源和精力来尝试更多领域(比如
硬件？)。
UI 设计点滴
43
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
Design Hackathon 工具手册
(文章经豌豆荚设计师授权转刊)
什么是 Design Hackathon ？
Hackathon，即「黑客马拉松」，是一个流传于程序员和技术爱好者中的活动。在该活动当中，大家相聚在一起，以合作的形式去编程，整个编程的过程几乎没有任何限制或方向。Design
Hackathon 类似用「黑客马拉松」的思维做产品设计，它将所有的产品设计师、视觉设计师
甚至工程师聚在一起，在一定的时间内，以头脑风暴的方式，最大范围地搜集产品的各种可
能性，然后抽象地整理出这些想法背后所隐藏的核心概念和产品需求，快速梳理出正确的产
品设计方向，之后将想法转化成可视的手稿和线框图，最终变成产品雏形。
快速发现海量可能性
Design Hackathon 非常适合产品定义阶段。在产品定义阶段，设计方向和目标尚模糊，产品
形态发展的可能性非常多。如果仅仅采用传统的设计手段(比如单人决策)，非常容易走向
片面和狭隘的方向，既可能出错，也会丧失许多机会。 Design Hackathon 将所有与产品相
关的人员聚在一起，利用头脑风暴法，快速产生海量想法和点子，让产品设计从个人经验和
竞品预设的桎梏中脱离出来，搜集最大范围的产品可能性。
确定方向并拥有可落地的细节
Design Hackathon 遵循了一个「从发散到抽象再到具体」的过程，从最直接的个人经验、想
法或者灵机一动的点子出发，抽象地归纳出这些想法背后所隐藏的核心概念或产品需求，最
后再回归到具体的产品设计草图当中。这个由「发散到抽象再到具体」的过程，既保证了思
维发散阶段的丰富性和灵感的多元化，又能达到将想法现实化的目的。
激发不同角色团队成员的创意
Design Hackathon 参与人员并不局限于产品设计师和交互设计师，而是可以拓展到工程师等
其他产品相关人员。不同背景和角色的人通过讨论和互动，能够相互激发灵感，获得丰富的
创意。在产品的设计过程中，设计师、工程师和高层领导者由于背景和理解问题的角度不同，常常会产生分歧和争议，使产品设计的时间周期变得不可预测。Design Hackathon 的方法论
可以让整个产品团队都加入其中，在平等、专注且高效的状态下，通过分类的方法，将所有
人思考的亮点条理化，汇聚到最终的产品设计中。
如何操作 Design Hackathon？
准备阶段
在 Design Hackathon 开始之前，我们需要先做一些准备工作，包括场地、人数和纸笔的准
备。
1) 人数：Design Hackathon 的参与人数以 8-15 人为宜，产品设计师、视觉设计师甚至工程
师等所有与产品相关的人员都可以参加；
2) 场地：场地需要容纳 5-7 组桌椅(因为在「方案设计」环节，所有人需要被分为 5-7 组)， UI 设计点滴
44
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
能保证每组成员都无障碍地写纸条和绘制线框图；
3) 物料：每位参加者需要配备 1 支马克笔，至少 1 支绘图铅笔，至少 1 本记事贴或 N 次
贴，3–5 张 A3 白纸。场地内还需要有一块大的白板 or 白墙(需要能容纳 100-200 张记
事贴)。PPT 和幻灯设备根据情况选择；
4) Design Hackathon 整场需要 1 位主持人，主持人只负责引导和组织，原则上不提供任何
关于产品的主观导向。
1. 发散：解决问题的方式
在开始一切之前，我们首先需要明确自己要解决的问题是什么。我们可能是需要设计一个全
新的产品，但我们对这个产品只有模模糊糊的想法。我们已经了解到一些用户遇到的困难和
问题，但是这个产品具体会以什么样的方式解决这些问题，呈现成什么样，应该有哪些功能
和特点，我们并不清楚。
解决任何一个问题的方式都是多种多样的，我们可以使用「How might we……」的句式，从
各个不同的角度分解问题，找出所有可能解决问题的方式。在这个阶段，我们需要的是开阔
思路，追求的是全面的、打破常规的思维和方向，不需要评价它是不是严谨，是不是可实现，更不需要提出具体的解决方案，解决方案将会在后续阶段补充。
举个例子，如果我们的问题是，到了一家餐厅不知道吃什么？
那么，我们需要使用「How might we……」的句式，从所有可能的角度来分解这个问题：
如何让点菜的过程变得有趣 (既然点菜的过程很麻烦)？
如何不去餐厅(不去餐厅也就不存在点菜的问题了)？
如何让大家不吃饭呢？(不吃饭也就不存在点菜的问题了)
如何知道大家最爱吃什么？
如何让大家口味都变得一样(这样就解决了众口难调的问题了) ？
如何事先知道这个菜大家喜欢不喜欢？
如何点主菜、素菜、汤(点一整桌菜可能很麻烦，但是只点一个汤就好多了)？
如何让大家进入餐厅就自然知道点什么菜？
等等……
2. 头脑风暴
通过前一步的预热，我们已经整理出产品开发中可能遇到的问题了。我们接下来要做的，是
基于这些问题，自由地、无拘无束地阐述解决方案。
我们需要最大范围地尽力去想各种可能的解决方案或 idea，不要限制自己的思维。任何人
想到一个 idea，就写在纸条或卡片上。
可以采用类似 N×5×5 的方式。N 表示所有参与头脑风暴的人总数，这个式子表示需要每人
在 5min 的时间内写下 5 个想法，然后将这 5 个想法传给下一个人，同时接收上一个人
传来的 5 个想法，再写一轮，如此类推，N 轮过后，每个人手中都会有 5N 个想法，所有
人共有 5×N×N 个。所有人都要写，但是相互之间不要交流。这样，每个人既会受到他人的
激发，又不会受他人想法的限制。 UI 设计点滴
45
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
7_1
譬如，在第一步的点菜问题上，针对「如何让进入餐厅就自然知道点什么菜？」，我们可能
会有很多的想法：
可以在餐厅门口放上菜单，任顾客翻阅浏览；
可以做招牌菜的海报或易拉宝展示；
可以做食客最多点选的菜肴 list；
甚至可以像风波庄那样，根本无需点菜，只需要食客告诉服务员用餐人数和忌口，服务员马
上就能为你上菜……
头脑风暴中，需要所有人遵守几项原则：
1) 不要关心老板或者领导的意见；
2) 不要限制自己的想法，因为往往到了下一阶段的执行，现实条件会给你限制的；
3) 不要放弃捷径，要站在巨人的肩膀上；
4) 不要讲太过于抽象的东西，譬如「做一个更好的产品」 ；
5) 事先设定一个时间限制，不可草草结束或无限拉长时间。
3. 卡片分类和完善
通过上一步的头脑风暴，我们会搜集到 100-200 个想法，甚至更多。这些 idea 都是感性
的、灵光一闪的、零散的。这一步，我们需要将这些 idea 组织起来，抽象出其中暗含的核
心功能或需求。我们需要对搜集到的所有想法进行分类，大概分成 5-7 类，每个类别都需
要有一个概括性的标题。
分类没有一定的规则，因为一般情况下，这个分类不需要非常严谨，由主持人组织大家讨论 UI 设计点滴
46
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
进行。每类下包含 idea 的数量应该差不多，如果有某个类别所包含的 idea 数量明显少于
其他组，则需要大家一起思考，为这个分类再做补充，直到所有类别下 idea 的数量大致相
等。
7_2
关于上一个点菜的问题，我们可能产生了很多的想法，这其中有一些是关于菜单设计的，有
一些是关于服务员服务技巧的，还有一些是关于餐厅制度的，等等。
4. 方案设计
经过分类，这些头脑风暴产生的零散想法之间就有了关联，每一个类别下的想法，对应的就
是一类功能或需求。截至此阶段，设计师们也会开始产生一些具象化的内容。这一步，我们
需要发动所有的设计师参与和贡献：将所有的设计师分组，每一组设计师领走一个类别的卡
片；根据这些卡片上的信息，设计师可以开始绘制草图和线框图，也可以出一个故事板。
对于每个组，绘图的过程和方式比较灵活，可以是每位组员分工做，根据所拿到的 idea 做
不同方面的草图，也可以组员一起讨论出一个草图。对 idea 的取舍由设计师自己确定。 UI 设计点滴
47
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
7_3
当所有的组都完成了草图或故事板后, 主持人可以进行简单的点评。之后, 这些成果就可以
交给具体负责产品的设计师做正式的产品设计了。
总结
Design Hackathon 遵循了「从发散到抽象再到具体」的思维过程。「发散」保证了我们不会
错失有关产品设计的各种可能性和细节，「抽象」帮助我们整理出想法中的产品逻辑和需求
层次，而「再具体」的过程则保证了我们所有的想法和需求都能落地成为可见的设计。通过
Design Hackathon 的方式，我们能够快速、准确地整理出一条正确的产品设计方向。
-------------------------------------------------------
文章内容来自豌豆荚设计团队，感觉豌豆荚的授权，豌豆实验室是个好地方，想做产品设计
的可以试试。www.wandoujia.com
UI 设计点滴
48
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
从版本升级看产品设计
软件开发中大家都比较认同的理念是敏捷，通过快速迭代来不断升级产品，从而达到产品更
好地服务于用户的目的。在这一次次的升级中，我们可以看到产品所折射出来的思想，了解
到设计人员的思考方式。查看某一产品的升级日志，对其进行归纳对比，这是我们进行竞品
分析时一个非常重要的方法。
研究豌豆荚这个产品的发展是一件很有意思，也很令人烦燥的事，一方面它的设计中处处显
示着用心，另一方面又因为有太多可以研究的内容而让人理不清头绪，只能不停地抓头发，对着升级日志，冥思苦想。
在豌豆荚1.X版本中，它更多的是扮演 Android 手机管理工具的角色，所有主体功能(欢迎、通讯录、短信、应用游戏、音乐铃声、视频、小说杂志、图片)都排列在顶部导航上，二级
导航位于左侧边栏。这是一种典型的工具型软件的布局，方便用户进行手机的管理。这样的
设计或许与当时的形势有关，2010 年初，国内 Android 手机的用户并不多，当时的用户都
是求新求变的一群人，对于手机的管理需求比较大，但当时游戏应用的数量也不多，用户对
于游戏应用的需求更大，同时期的应用汇、安智、机锋、N多等都做起了市场，豌豆荚为什
么不去做个应用市场呢？
8_1 豌豆荚首页
2011 年5月20日，豌豆荚发布了应用搜索，聚合多家应用商店的内容，这时豌豆荚的野心
开始显露了出来，这群人想做垂直领域内的搜索引擎，他们同时推出了 Web 版本和手机客
户端，结合之前PC 端积累下来的优势，一跃成为强有力的应用分发渠道。这时的应用市场
正处于群雄割据的局面，没有明显的技术壁垒导致在这个方向上的创业者众多，创业者们想
要更多的流量，和豌豆荚合作已是一种不得已的选择。 UI 设计点滴
49
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
8_2 搜索页
2012 年初，豌豆荚发布了历时 10 个月设计开发的 2.0 版本，在对需求进行重新归纳整理，对导航及信息架构进行了重新规划后，2.0 版本给了用户焕然一新的感觉。据豌豆荚团队介
绍，它们的这次改版，扔掉了 .Net framework 的架构，重新用 C++ 开发。在界面布局上进
行了大刀阔斧又细致入微的设计。我们可以看到导航全部移动了左侧，手机管理功能与内容
下载并列，与1.0版相比，豌豆荚大大提升了内容下载的权重，这也是趋势使然。这个时候
Android 手机用户增长迅猛，游戏应用下载的需求成了重中之重。在欢迎页上，豌豆荚也做
了精力的设计，以此加强用户和手机间的情感联系，他们使用了用户在手机上设置的壁纸来
作为欢迎页的背景，并在此基础上加入了应用推荐。
8_3 豌豆荚 2.0欢迎页 UI 设计点滴
50
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
在接下来的版本升级中，豌豆荚还别出心裁地以元素周期表中的化学元素来进行命名。在业
界， Android 的升级会以甜点的名字来命名，而 Mac OS X 则以大型猫科动物的名字来命名。
不知是不是因为豌豆荚的化学元素不够稳定，导致豌豆荚的升级过于频繁，引起了用户的反
感。所以版本升级的频率也是我们在产品设计中需要考虑的问题，什么情况下必须升级，什
么情况下可以暂缓升级，通过怎样的升级频率来提高用户的活跃度？
2013 年6 月 25 日，豌豆荚 PC 端升级到了2.58 版本，代号为 Dy(镝)，这次他们对侧边栏
和导航又做了改动，把资源下载提到了手机管理功能的上面，再一次加强了下载的权重。在
视觉上也做了调整，把左侧栏的底色改为较深的灰黑色，重新设计了彩色的小图标，对于界
面的尺寸还进行了像素级的调整，以此让右侧的可视区域更大、更明显，方便用户的下载。
之后的升级更让人看到了豌豆荚团队的用心，他们请左佐工作室重新设计了 Logo 和标志，进行更清晰的形象定义。再一次设计了欢迎页面，把手机管理与发现探索结合在了一起，只
需上下滑动就能无缝地切换场景，另外还精心挑选出高清背景图片，一键设置为手机壁纸。
在内容的组织上，豌豆荚除了进行游戏联运的商业尝试外，还把论坛版块加入到客户端中，以此增加用户的参与度，加强用户黏性，更是进行UGC社区运营的一种尝试。
8_4 豌豆荚 2.62 版
以上分析的都是豌豆荚在PC 端上的产品设计过程，在移动互联越来越重要的今天，豌豆荚
手机端是怎样进行演变的呢？
在 1.0 版本中，豌豆荚在手机上还只是个守护，用来连接 PC 上的客户端。在推出应用搜索
之后，豌豆荚手机端进行了改版，加入了应用搜索下载，已成为手机上的 Android 应用市
场。之后就是不断的优化升级，直到 2012 年版本走到 3.0。在这个版本中，它采用了符合
Android 4.0 规范的Holo Light 风格，因此有人觉得它与 Google Play 4.0 版本很像。对此，豌豆荚的设计人员在知乎上进行了解释： UI 设计点滴
51
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
1. 淡绿色和灰色一直是豌豆荚的品牌色彩，而 Google Play 应用频道的品牌色也是淡绿色，造成了两者在视觉上第一印象很接近。
2. 综合考虑手机界面显示、应用信息的推荐，豌豆荚采用了简单紧凑的卡片版式设计，而
Google Play 从 Google Now 等应用中沿用了卡片的风格。
3. 豌豆荚在内容的推荐上更具人情味，在信息架构上与 Google Play 是不同的，另外在应
用的安全和隐私方面也做得更多。
8_5 左豌豆荚 3.0 右 Google Play 4.0
的确，豌豆实验室里有着拥有独特气质的一群人，这群人对设计也有很深的理解，他们设计
的豌豆荚已成为一个非常重要的应用分发渠道。然而又不只是应用分发渠道那么简单，在
2013 年9月12日，豌豆荚发布了视频搜索，以满足用户对视频的需求。在移动视频搜索端，它收录了13 个内容源，分为电影、电视、综艺、动漫，全部来自各大视频 App，非传统网
页。豌豆荚要打破 App 之间的壁垒，要做移动端上的搜索引擎，做内容发现平台，从他们
的产品设计中，我们可以深刻地感受到这些显著的变化。
这一变化在 2014 年 1 月份来得更加迅猛，这个月初豌豆荚手机端发布了 4.0 版本，去除了
旧版中左侧的抽屉式导航，把应用、游戏、视频、电子书、壁纸等资源直接展示主界面上，把自己定位为手机上的娱乐中心，在文案上也做处处做引导，以此改变人们心中豌豆荚就是
个应用市场的印象。新版本更加清新简洁，并没有完全遵守 Android 的设计规范，但使用
下来，学习成本并不高。 UI 设计点滴
52
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计点滴
53
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
向豌豆荚的产品设计师了解到，从最初发布到现在，豌豆荚 PC端进行上百次的升级，而手
机端也有几十次的升级。在这么多的升级中，有bug 的修复，小功能的增加，细节的调整，还有重大的改版，每一次的升级都包含了工作人员对于产品设计的思考，对于这个产品方向
上的尝试，有成功的也有失败的。作为一名产品设计的从业人员，没能参与到豌豆荚这个产
口的整个设计过程中，只能从零星的信息中来猜测他们的设计思路，管中窥豹，说得不对的
地方还请指正。
UI 设计点滴
54
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
[慢工细活]设计思考
因为有想过在这座城市、这个村庄开一间杂货店，出售手工作品，工作之余打理打理。也希
望通过自己的努力,让偌大的中国能够容得下我的一张书桌。
当你手中有一把锤子的时候，你所看到的都是钉子。由于从事UI 设计相关工作，主要针对
移动互联网领域，因此，首先想到的是这个怎么设计成 iOS 应用。于是对杂货、创意产品、手工作品的相关网站及应用进行了一番研究，然后试着结合移动设备的特性，对这个应用进
行了设计。希望人们可以利用碎片时间(排队、等车、坐车等)使用这个应用，通过它方便
地发现有爱的手工作品，也可以向他人展示自己的作品。
(PS：我把这个应用取名为【慢工细活】，想表现出手工作品的特性，这些作品都是手工作
者们的用心去制作出来了，倾注了他们的心思与爱，也想表达一种“慢”的生活态度，闲暇
之余，欣赏一下这些有爱的手工作品)
根据【慢工细活】所要达到的目标，对需求进行了梳理，如下图： UI 设计点滴
55
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
接着是交互设计阶段，由于平时研究的应用比较多，在此应用设计上时展得比较顺利，采用 UI 设计点滴
56
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
了常见的Navogation bar 和tab bar 布局，这种方式对于多信息的展示及切换是非常方便
的，一些新颖的交互方式也有考虑，留着下个应用再尝试使用。
UI 设计点滴
57
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
(PPS： 此过程中研究的应用有：Path, Pinterest, Etsy, Bump, Instagram, Calvetica,下厨房，过日子，花瓣，堆糖精选，QQ2012 等，其中下厨房做得真用心，关于这个应用的
研究可以单独成文了)
视觉设计上对风格也进行了一些尝试，最终的设计效果如下：
UI 设计点滴
58
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
UI 设计点滴
59
Author: Wu QiWen Email: hanyan51@gmail.com Tel: 18602123593
总结：设计是一个为断优化的过程，在进行交互设计时会去反推需求，在进行视觉设计时又
会去反思交互。如果有一个想法，那就去实现它，关于【慢工细活的】的创意在我脑子里盘
璇了很久，现在利用所学的知识，完成了设计。 ......
您现在查看是摘要介绍页， 详见PDF附件(4541KB，59页)。