码迷,mamicode.com
首页 > 其他好文 > 详细

《破茧成蝶》读书笔记——技能(2)

时间:2015-06-09 13:29:33      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

纸面原型

目的:快速表达想法、节省时间、提高效率,沟通、测试、尽快解决不确定的问题。

   可快速修改,尽早否定不靠谱想法。

     确定纸面原型后,可以每细化一个界面就交付给视觉,缩短项目周期。

使用工具:草图使用铅笔和纸张。逻辑使用马克笔、双头画笔等。交互效果用便签纸和小卡片,当提示气泡、弹出层、模态窗口等,贴在绘图本上,也可以作为页面标注工具,说明产品功能。

          若会用到很多可复用的标准交互组件,可以网上找到标准交互原型组件库,打印出来,剪裁成模块贴到页面框架中,与受贿草图配合使用。

     若为团队合作,可利用白板进行绘制,拍照留存文档。

需要表达什么:框架、流程、基本功能和内容,可以忽略细节。

         逻辑关系,可以用深浅颜色表现。

 

第七章  设计标准

什么是原型

它是产品功能与内容的示意图,既包含静态页面样式(线框图),也包含动态的操作效果(交互说明)。

设计师要在考虑商业性、各种限制的基础上,从用户角度出发,把需求文档“翻译”成设计目标,在一定程度上弥补因流程不合理导致的问题,充分发挥体现自身价值的设计决策过程。

eg:产品经理发现市场需要果汁,而自己手上刚好有苹果,就急忙让设计师榨苹果汁,但设计师经过思考、分析,发现用户更喜欢橙汁,在与产品经理沟通后,把苹果汁换成了橙汁。

标准的原型应该包含什么内容

简要说明与信息结构:

  • 变更日志:方便项目成员看到每次更改的内容。
  • 版本说明:此版本变了哪些地方。
  • 信息结构:产品内容、组织、页面层级等。主要是产品的逻辑结构和用户习惯,与需求文档不同。

任务流程&页面流程:

  • 任务流程:用户如何操作、界面如何反馈等。
  • 页面流程:从一个页面跳转到另一个页面的完整过程。

线框图&交互说明:

  • 限制:范围值(数据取值范围)、极限值(数据的显示限制)等。
  • 状态:默认、常见、特殊(非正常使用时)状态等。
  • 操作:常见、特殊、手势操作及误操作等。
  • 反馈:提示、跳转、动画等。

总之,除静态页面外,还需要考虑各种动态情况;除正常情况外,还需考虑特殊和错误情况。

绘制线框图

通过明暗对比表达:突出页面元素的优先级,但是,深色并不意味着比浅色重要,要看色块之间的对比关系。

不使用截图与颜色:不要拼凑各种竞品的截图来组成页面;不要在线框图上使用色彩,会对视觉设计形成干扰,告诉视觉设计需要营造的感觉和氛围即可,不需要太过具体。

合理的布局:尽量保持简单的结构,最好不要出现2列、3列混排的结构。确定界面布局时,提前和视觉设计师沟通。

遵守栅格规范:保证交互稿中的字号、间距尽量符合视觉要求。提前和视觉设计师沟通商量好。

标记第一屏高度:1024*768情况下,极限情况可定为 570 或者 600

 

《破茧成蝶》读书笔记——技能(2)

标签:

原文地址:http://www.cnblogs.com/caslly/p/4562906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!