交互设计师必读!精细原型设计三要素

2014/05/05 11783

交互设计师必读!精细原型设计三要素

@AzTamic (百度MUX交互设计师):很多交互设计师朋友可能觉得交互作品既没有视觉作品高大上,又没有用研报告高科技,总是感觉不那么好看。其实不然,交互文档也是可以有档次的。这次我们就来解决这个问题。

作者个人博客:tamic.cc

既然聊精细原型,我们就暂时抛开最基本的栅格化等设计要素不谈,我们这次只是从原型本身的精细化来聊聊。

交互设计好文:
《设计师新宠!交互神器ORIGAMI》
《交互神器!谁是最好用的原型绘制工具?》
《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

下面说说个人觉得影响原型精细化的几个维度,不一定对,随便看看就好:

一、浅色的主体

首先,交互设计师输出的是流程图,给开发以及产品经理沟通之用,所以有时候为了突出界面的层次和区域,有必要通过深浅灰色来进行区分,在我制图的过程中,基本上界面上70%都是白色为主,一个是为了看起来更加干净,再一个是如果有必要打印沟通,当然白色是比较好的。

经验分享:教你做出有格调的交互文档

二、性感的线条

在设计图中有很多线条,线条的粗细、虚实程度以及构成都有不同的意义,灵活的运用这些线条可以帮助自己的文档提高一个档chi。
下面说一说我的一点小经验供大家借鉴。

首先说线条怎么画出来,很多设计师通常使用矩形工具来为自己的界面提供线条,这样用起来最方便,但是如果在界面内的区域划分、条目列举等等情况下,众多矩形看起来会非常的没有重点,同时在两个矩形重叠处也非常不好处理,所以再界面内的区域划分这种情况使用适当的连接线工具还是非常好的,既避免的重叠的问题,又更好调节哪些是重点,哪些不是重点。

经验分享:教你做出有格调的交互文档

然后是线条的虚实,线条的虚实是配合上一条来使用,在页面内划分时候虚线配连接线会让界面更有层次。同时我喜欢用线条的粗细来做背景内容和界面内容的区别。

上面说的只是线条的几个维度,运用好可以做出非常性感的线条,同时也不会增加工作量。

经验分享:教你做出有格调的交互文档

三、敏感的颜色

适当的颜色可以帮助交互更好的发挥功效。

首先,适当的颜色可以更好的达到黑白灰无法达到的效果,但是这个颜色不要太艳,所以在使用颜色时应该尽量使用纯度不高的颜色,同时可以适当调节一下透明度,目的就是不抢视觉,同时还能表达清楚我们的意思。

我们来看一下下面这个例子,对于删除这种操作,我选择使用20%透明度的红色来着色,首先它没有抢视觉,其次除了设计师本身之外,开发和PM都能很好的理解这是一个”红色”的操作。但是你想想,如果用黑白灰此处你应该如何表现呢?

经验分享:教你做出有格调的交互文档

与此同时,对于和自己公司的产品经理和开发者有着长期合作的设计师来说,给颜色赋予性格也是非常重要的一件事,红色代表删除,黄色代表选中,绿线代表前进,红线代表后退,等等诸如此类的颜色定义,在长期的使用和沟通中可以培养其他人员对你颜色的敏感,同时,除了线型,色块等等,你又多了一种表达含义的一种方式—-颜色。

经验分享:教你做出有格调的交互文档

其实交互文档可以更精致,可以更有”格调”,对吧?

还有,如果你连逻辑都没想好就来想如何把交互图画的牛逼,那你就错了,对于思维清晰的同学来讲,这个是装逼利器,对于想都没想明白的同学来讲,充其量算花拳绣腿。

百度招人咯,想跟作者成为同事的童鞋可以去试一下:

QQ图片20140504134448

 

原文地址:tamic.cc
作者:@AzTamic
【优设网 原创文章 投稿邮箱:2650232288@qq.com】

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量68万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/professional-interactive-document

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里