5 个关键点!优化你的 UI 原型设计
当你和你的团队着手开始一个产品开发的时候,最开始的一步一般是绘制线框图,这是大部分产品项目的第一步,它不复杂但是却对整个产品的完成形态和质量有着至关重要的作用。
很多刚开始工作设计师或者产品经理都会提出一些问题,例如:“我该怎么提高我的 UI、UX 设计技巧” 或者“有什么书籍或者网站可以教我一些 UI 设计的高级技巧吗?“ 设计的技巧是存在的,而且它们对设计确实有帮助,但是却可能不是让新人甚至是有一些从业经验的人的作品更加完美的基础。除此之外还有 5 个关键点值得 UI 设计师们放在表面的设计技巧之前。
![](http://upload-images.jianshu.io/upload_images/1018399-78eb97d8238759d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
1.UI 原型设计不是做一个精巧的展示模型
很多刚开始 UI 设计甚至一些有经验的设计师常常会在设计产品 UI 原型时误入”究竟什么才是更好的 UI 设计“的歧途。他们常常觉得一个有着精致细节、无懈可击的设计和高级配色,几乎和成品看起来一模一样的 UI 原型设计才是好的。其实这个时候他们已经对”UI 原型设计的作用”有了误解,UI 原型设计作为一个产品开发流程的第一步和最基础的一步,设计出的原型并不是要展示设计师在图形设计方面的高超技艺亦或是超越艺术家的色彩敏感度。所以这不是考虑用什么字体、图标具体尺寸以及每一个页面上的所有细节的时候,同时避免掉细节的干扰才是设计师该做的事情。
2.在设计中展示自己的想法
UI 原型设计的优劣在于它能不能帮助设计师整理自己的思路以及清楚地向客户展示自己的思考,同时它是否能为之后的图形设计和开发流程提供清晰的方向和节约整个项目所花费的时间。好的设计需要充分结合客户的需求,同时结合设计师自己的想法和经验优化客户提出的一些不太可行的想法。除此之外,一个好的 UI 设计在一开始并不是以细节博得客户的欢心,而是靠能充分展示自己对该设计的核心理念和想法。
![](http://upload-images.jianshu.io/upload_images/1018399-0d98ce8b50094e2c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3.如何得到更好设计成果
一个产品开发的过程是设计师和工程师共同努力的结果,想要得到最好的成果,除了融入客户的需求,设计师必须考虑到工程师的工作是否能顺利开展。因此,一些天马行空的奇特想象此时可以克制一些。同时工程师也必须考虑到开发的可行性,在编程开始前充分且经常和设计师沟通完善方案。一个好的开始远比完成后的修补来得简单。
4.放慢自己的节奏
心急吃不了热豆腐,一个好的 UI 设计项目不是几个小时或者一天就能完善的,因此设计师如果能放慢脚步,会发现这一时期是最好的融入众人想法的时期,它能让你的设计快速丰富起来。其次,修改设计图其实是成本最低的一种优化方式,因此你可以结合从大家那里收集来的点子慢慢筛选并使它们完善自己的设计。
此外,准备多个版本的设计稿是非常重要的,如果从一开始到最后只有一份设计稿,作为设计师的你可能要对自己的创造性加上一个“问号”了。对一个需求的解决方案绝不止一种,因此准备多版本的稿件能帮助你对比每个版本的优劣点,从而在最后确定使用哪一个的时候能保证它是你当时能提供的最好的。
![](http://upload-images.jianshu.io/upload_images/1018399-b4a8ee7a1038b5fd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5.确定 “版本 1.0“ 到底是哪一版本
当你确定了“最好”的版本,不要急着就认为它就是你要寻找的目标。你现在拿到的是你对这个产品功能的所有想象,但是当它要作为一个产品推出给用户,你需要考虑你的“完美”设计是否对用户也是一种负担。因此,你还需要筛选作为 1.0 的版本,你需要把哪一些功能或者特性首先推给用户,然后在日后的版本更新中慢慢把你的所有想法带向用户,让他们有时间来适应你的设计。你的最初设计也许要在数个版本更新后才能和用户见面。这同样是一个工作量很大的工作,你可能也需要准备多个版本来确定最好的那一个,但是当你经历过这一系列的流程,相信你得到的结果远比你预料的好得多。
不知道这五点建议有没有对阅读这篇文章的人提供一些优化 UI 原型设计的帮助,如果你觉得文章中的内容正是你需要的或者是你没有注意到过的,作为作者我还是感到很欣慰。最后希望新加入设计师大家庭的新成员能在自己的工作中取得丰硕的成果,也创造出越来越多的优秀的 UI 原型设计作品。
推荐原型设计工具:
1 Mockplus
2 Axure
3 UXpin
5 个关键点!优化你的 UI 原型设计的更多相关文章
- 《用户体验要素》澄清了 UI 原型设计中看不见确感受得到的那一层
<用户体验要素>澄清了看不见确感受得到的那一层 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...
- ui/ue设计师应该了解的原型设计软件
前段实践整理过一些原型设计用的软件,这里分享一下,喜欢对更多的PM战线的童鞋有所裨益.(因为交互原型工具Axure ui设计师都很常用了,文中就不专门介绍了) 首先分下类: •1.交互原型(产品能做什 ...
- Pencil-一个开源免费的UI原型工具,自带ios和android模板
Pencil是一个开源免费的UI原型工具,自带ios和android模板,可以很方便的做mockup. 下图是一个官方展示的模板:
- UI Prototype Design IDE( 界面原型设计工具 )
UI Prototype Design IDE( 界面原型设计工具 ) 如何用工具去与客户进行交流,互动,定义要做的系统,什么什么的... 0.Balsamiq Mockups http://ww ...
- 在原型设计上,UI和UX设计师有哪三个区别?
原型设计在日常的软件开发过程中是必不可少的,不管是UI还是UX设计师,很多工作都会涉及到原型设计.那么这两类设计师在设计原型的时候表现出了哪些的不同点呢?今天就让我们来讨论一下,先说说我发现的3个不同 ...
- UI & 原型
UI & 原型 产品原型设计与团队实时协作平台 https://www.xiaopiu.com/download https://www.xiaopiu.com/forum/posts/5b9 ...
- Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)
Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...
- 软工实践原型设计——PaperRepositories
软工实践原型设计--PaperRepositories 写在前面 本次作业链接 队友(031602237吴杰婷)博客链接 pdf文件地址 原型设计地址(加载有点慢...) 结对成员:031602237 ...
- 15款优秀移动APP产品原型设计工具
一新来小盆友问:“移动产品原型设计都用啥工具?” 答:“@#¥……&%*” 又问:“能详细说下各个工具吗?我比较一下” “……” 好吧,谁让我那么的爱分享而你又是小美女呢 ———————正文开 ...
随机推荐
- PHP最近做了物流快递查询的接口用得是快递100
最近做了物流快递查询的接口用得是快递100的,分享下心得体会 主要使用了2种接口,一个是api的 返回json xml 各种数据的 一个是返回的URL的 就是一个带结果的网址 . 1 申请 找一 ...
- springboot1.X 到2.X 的改变
参考:https://blog.csdn.net/tzs_1041218129/article/details/79514845
- J2SE 8的Lambda --- Comparator
Person[] personArray = new Person[]{new Person("Tom"),new Person("Jack"),new Per ...
- 前端-BootStrap
bootstrap 英 /'buːtstræp/ 美 /'bʊt'stræp/ n. [计] 引导程序,辅助程序:解靴带 关于 BootCDN BootCDN 是 Bootstrap 中文网支持并维护 ...
- UGUI Canvas
Render Mode Screen Space - Overlay 在此模式下不会参照到Camera,UI直接显示在任何对象之上 1.Pixel Perfect:可以使图像更清晰,但是有额外的性能开 ...
- SVD 实现
机器学习相关——SVD分解: http://www.cnblogs.com/luchen927/archive/2012/01/19/2321934.html SVD python实现: import ...
- Linux就业技术指导(二):简历项目经验示例
一,期中项目经验示例 1.1 新服务器上线搭建系统环境 1,根据现有结构部署工具(PXE+kickstart) 2,结合应用系统需求定制部署模版 3,制作系统优化等一键执行脚本 4,自动化部署实施 5 ...
- linux下set命令的参数及用法
linux set 命令 功能说明:设置shell. 语 法:set [+-abCdefhHklmnpPtuvx] 补充说明:用set 命令可以设置各种shell选项或者列 出shell变量.单个选 ...
- Electron Browser加载iframe(webview src属性)
browser或者webcontents 的高度与宽度比例对webview中src的页面结构也是有一定影响的
- MySql log_bin
[MySql log_bin] 1.查看 log_bin 是否启用. 默认情况下,mysql server 不启用 binlog(验证方法1: 执行"show variables" ...