Information Design

第一章 wireframing(线框图)

1、 设计的流程包括：

POV（point of view）: 提出个人的想法／come up your pov

Storyboard(故事板)：  通过绘制故事板，来思考用户使用的场景，如何满足用户的需求

Paper prototype(纸质原型) ／Rapid  Low  fidelity(低保真的快速原型)  ：用来思考你的原型要实现什么东西

Wireframe(线框图) ： 真正细致的去思考界面是如何实现的

2. Wireframe

（1）绘制线框图的方式：

对于wireframe， 我们可以选择手绘,也可以使用一些软件

（2）使用手绘的原型的好处：（推荐使用）

可以很方便的向团队成员展示当前的设计状况；

便于修改

（3）绘制线框图的注意事项：

不需要使用色彩或字体（因为一旦开始使用这些元素，人们就会开始评价是否应该用某种色彩）

设计界面时要思考： 这种布局是如何实现我们的目标任务的（How does layout achieve our tasks）

而不是因为我们这边实现需要三个按钮，所以我们在这个地方放上三个按钮

（4）绘制线框图：

1.  使用网格系统（Grid system）

2.  要让视觉的中元素，不论在什么样的平台下（桌面电脑，平板，手机），内容都需要是清晰可见的

3.  考虑不同的语言，是不是会破坏掉页面

4. 如果需要使用条形图或者饼状图，则需要考虑如何放置，留有足够的空间

小tips： (1) 对于用户来说，左对齐是符合用户的阅读习惯的

（2）如果对于有一行两组的情况，可以采用，左边有对齐，右边最对齐的方式（设计方面的）

5. 避免页面充满一些不需要的元素 , chart junk

例如： 在每个页面放置logo, 在这样做之前，思考为什么需要重复放置这些logo，是不是可以去掉

6. 在绘制wireframe的时候，在决定页面的网格布局时，可以多多尝试看看其他网站的页面布局，思考别人是怎么做的。