使用线框图来简化你的产品设计流程
绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素,是网站内容布局的基本视觉表现方式,是网站开发过程中一个重要的步骤。
线框图的好处:
让用户、设计者在初期就可以对网站有个清晰明了的认知能激发设计师想象力,使其在创作过程中有更多发挥空间给开发者提供一个清晰的架构,让他们知道他们需要编写的功能模块让每个页面的跳转关系都变得清晰明了很容易的改变页面布局绘制线框图的工具:
手绘:纸、笔流程图或思维导图工具:Visio、Mindmap、MindManager原型绘制软件:Balsamiq、Axure图形软件:Photoshop、IllustratorHTML工具:Dreamweaver线框图实例:
1、简单纸面原型:这是Broad Reach Retail Partners网站的简单纸面原型
2、低保真的HTML原型:没加任何风格的网站内容陈列
3、低保真的布局原型:界面布局线框图,由Jesse Bennett-Chamberlain设计
4、线框图原型:A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe byPhil Hawksworth.
5、线框图原型:This one is based on advanced use of a blog publishing system (WordPress). ByMattheiu Mingassson or Activeside Internet Strategies and Consulting.
6、线框图:A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of31Three.
7、线框图: A wireframe with color and images. Author page wireframe by Bokhandel.
8、线框图: 另一个带色彩的线框图. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.
最佳范例要点:
简单设计灰度模式展现:灰度有助于把注意力集中在产品功能层面和布局层面,如果直接加图片和颜色,容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。线框图用网站地图串联起来专注于理想结果等同于真实分辨率尺寸一开始就计划好内容和元素要避免的问题:
内容太多,重点不突出强调颜色和设计过多的设计细节另外,介绍一个专门讲线框图的网站:Wireframe Magazine
本文缩略翻译自Using Wireframes to Streamline Your Development Process,疏漏和错误之处,还望批评指正
建议继续学习:
- 手机产品设计方向 (阅读:6337)
- 马化腾在腾讯产品峰会上关于产品设计和开发的内部讲座 (阅读:2553)
- 360安全卫士卸载金山网盾看产品设计 (阅读:2366)
- 互联网产品设计之用户调研 (阅读:2287)
- 前端开发是产品设计么 (阅读:2263)
- 产品UI设计流程 (阅读:2286)
- 研发流程中与其他岗位协作效率的提升 (阅读:2144)
- 向温总理学习产品设计 (阅读:2038)
- 做产品前六问自己 (阅读:2012)
- 浅谈认知心理学与产品设计的结合 (阅读:2075)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:elya妞 来源: 落花流水――elya妞
- 标签: 产品设计 流程 线框图
- 发布时间:2010-05-25 22:41:06
- [68] 如何拿下简短的域名
- [68] Go Reflect 性能
- [64] Oracle MTS模式下 进程地址与会话信
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [58] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成