07:设计标准——好的设计需要表达
原型:是产品功能与内容的示意图,包含静态的页面样式(线框图),也包含动态的操作效果(交互说明)。
通过思考,设计方法等,把需求转化为设计方案,再细化成标准的设计原型。
拿到需求后,在考虑各种限制的基础上,从用户的角度出发,把需求转化为目标。(例如:产品经理发现市场上需要果汁,而手里刚好有个苹果,于是设计师榨出苹果汁。设计师通过思考、分析,发现用户更喜爱的是橙汁。如果提供橙汁,用户会更满意,对公司也没有不利影响。于是最后决定提供橙汁。这个设计决策的过程就是价值的体现。)
如何产出标准的原型稿(清楚、规范)
推荐:设计移动端产品,使用PowerPoint来绘制原型。
高保真原型:在外观、操作上与最终产品一致,适合做展示用。
标准的原型应该包含什么内容
1.简要说明与信息结构
1.1简要说明:以列表的形式呈现
简要说明内容1.2信息结构:需求文档阶段,信息结构更多体现产品的逻辑结构。原型稿是综合考虑产品逻辑结构和用户习惯而得到的结果。
2.任务流程与页面流程
2.1任务流程:是指用户使用产品时,它的每一步操作会遇到什么结果,系统会如何反馈等,引导用户完成用户目标。
2.2页面流程:展示用户如何通过操作,从一个页面跳转到另一个页面。
3.线框图与交互说明
3.1交互说明:
哪些内容需要详细的说明:文字过多怎么显示?操作瞬间会出现什么提示?点击了页面上某个部分内容,会出现什么反馈?跳转到哪个页面?......
推荐:交互说明与动态效果相配合的方式
交互说明的内容注:除静态页面外,还需考虑各种动态情况:除正常情况外,还需考虑特殊和错误情况。
如何划线框图。
1.通过明暗对比表达。
直观表示界面元素的优先级关系。
2.不使用截图和颜色。
线框图上不建议使用色彩。
3.合理的布局。
确定界面布局时,提前和视觉设计师沟通商量。
4.遵守栅格规范。
保证交互稿中的字号、间距尽量符合视觉要求(如间距最小为10像素)。
5.标记第一屏的高度。
设计Web端时应注意。最重要的内容,在第一屏内完全显示。
6.表达清楚UI逻辑。
一般来说,操作的优先级大于链接,链接的优先级大于文本。最重要的操作一般是用按钮来表现的,然后是普通的操作,最后是消极的操作。
7.考虑视觉实现后的效果。
绘制线框图时,应考虑细致。考虑到文字对图片的影响。
8.了解视觉趋势。
通过对比某个应用的前后版本,分析视觉趋势,应用到线框图的设计中。
写交互说明的诀窍
1.尽量使用真实、符合逻辑的数据内容。
极端情况的展示需要考虑,但不要作为最主要的。
2.不遗漏特殊状态的描述。
用户极少用到的情况,不能忽略。(比如:勾选人名后,下面相应显示对应的信息。如何显示?信息如何排序?最多显示多少?超出一行怎么办?名字有无字数限制?名字超长(外国人、少数名族)怎么办?重名怎么办?勾选人名后,在下方修改信息后怎么办?...都需提前考虑到并写在交互说明里。)
3.避免过长的说明。
4.避免流水账式的说明。
流程图代替文字说明。用表格罗列何种状态。巧妙组织文字说明(用if\else\case等)。制作动态效果。
5.关于重复出现的模块。
对于重复出现的模块,可以将其命名,在其他页面上留个空位就可以了。尽量用模块化的思维方式来处理较复杂的问题。
6.如原型有修改,不要口头沟通,而要更新交互说明并告知大家。
关于设计规范
一、有了设计规范,可以统一整个产品的风格,“一致性”形成鲜明的产品特征,增强用户粘度。提高易用性。避免重复设计同样的功能,减少工作量,提高工作效率。
二、什么时候开始设计规范?
1.大型且重要的产品。
2.产品结构、页面类型、UI组件相对较单一,可复用的内容较多。
3.项目人手充足、时间较充裕。
4.品牌风格、主题风格已确定完毕,品牌备忘和梳理势在必行。
5.产品线日益丰富,后续设计一致性和可循环的要求被提高。
6.产品结构壮大,新人不断涌入,沟通和执行效率亟待提升。
三、制定设计规范的原则
1.内容一定要简单易懂,条理清晰。
2.交互设计一般先于视觉设计,视觉是在交互的基础上做效果。
3.先制定大的设计方向,再制定项目中单个详细的说明;先制定团队合作的规范,再制定个人操作上的规范。
网友评论