比巴波的小柜产品经理@产品

《破茧成蝶》读书笔记⑦:如何绘制原型

2017-10-26  本文已影响46人  luna比巴波

前文:《破茧成蝶》读书笔记⑥:标准的原型长啥样

后文:《破茧成蝶》读书笔记⑧:项目跟进

十二、如何绘制原型

12.1绘制线框图

明暗对比:通过色块的明暗对比,呈现界面元素的优先级(提前定义深浅的含义)

不使用截图与颜色:不要用竞品的截图,不要告诉它具体的元素(ex. 几个铜钱飞出来的样子……)

合理的布局:尽量统一,不要出现2、3列混排的情况

遵守栅格规范:保证交互稿中的字号、间距尽量符合视觉要求(ex. 间距最小为10像素)

标记第一屏高度:超过40%的用户的屏幕分辨率高度紧握768像素,所以1024*768像素分辨率下,第一屏高度的极限情况可定位570像素左右

表达清楚UI逻辑:可以用表格表示出优先级、色调

考虑视觉实现后的效果:比如图片只是占位符,但要考虑实际如果有图片,是否会让用户产生视觉混乱

了解视觉趋势:将新的视觉设计趋势融入产品

12.2如何写交互说明

尽量使用真实、符合逻辑的数据内容

不遗漏特殊状态的描述:多想一些极限状态下的情况

避免过长的说明

避免流水账式的说明:①流程图代替文字说明    ②用表格罗列各种状态   ③巧妙组织文字说明(用if、else、case来说明)    ④制作动态效果

关于重复出现的模块:当很多个页面里的某个模块重复出现,可以把它独立出来

原型有修改,要更新交互说明,不能只口头通知

12.3关于设计规范

什么是设计规范:交互规范、色彩规范、logo规范、UI图标规范、控件规范…

如果没有规范会怎样:会导致不同模块独立设计的风格不统一、同类功能组件存在多个样式、同类元素多样性(按钮高度、链接样式……)、设计效率低下(相互扯皮)、设计质量难把握

规范性解决的问题

①形成鲜明的产品特征,增强用户黏度

②提高易用性(用户可以快速上手)

③满足团队协作需求

④其他(避免重复劳动、提高工作效率、降低培训和支持成本……)

设计规范的分类

①产品战略级方向的规范(整个公司主打的设计方向、共识内容)

②单个项目中的设计规范

何时开始设计规范:项目完成后再设计规范(场景:大型且重要的产品、可复用的产品结构多、时间多、品牌风格已经确定、产品线日益丰富)

制定设计规范的原则:从大到小制定

规范的执行及注意事项:从全局考虑,尽量执行规范,但局部可有特色处理


以上内容为《破茧成蝶》(作者:刘津、李月)的第7章读书笔记及摘要,本人加入一定量自己的理解;因水平有限,欢迎大家交流指正,谢谢~

上一篇下一篇

猜你喜欢

热点阅读