第一章 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的时候,在决定页面的网格布局时,可以多多尝试看看其他网站的页面布局,思考别人是怎么做的。