• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 刚毕业没作品?学会做UI 概念设计方案,也能打动面试官!

刚毕业没作品?学会做UI 概念设计方案,也能打动面试官!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,作品集设计,概念设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

作为视觉设计师,需要经常做一些概念设计,设计探索,来尝试新的解决方案。很多刚毕业的设计师没有很好的实际项目案例,通过概念设计或者Redesign能很好的帮助他们去理解一个产品,像真正做产品一样去设计每一个页面,最近看了些设计师作品集,发现很多新人常见的问题,给大家分享下,顺便

文中引用的一些案例,没有贬低任何人之意,只是表达观点。

为了视觉效果而做

这个设计应该很多人做过,想问抛开图片以外,它的设计创意在什么地方,我觉得这个设计师找图片的时间应该比设计时间长,但是这个设计解决了什么问题?我们无法看出。

还有这种都是单页,想问如果落地后,换成正常的图片会是什么样?是纯粹追求视觉效果吗?作为体验设计师,我们工作并不是去创造一个好看的图片,而是需要去满足一些需求,鼓励用户去使用,设计师需要假设一些设计场景,将这些为前提你的设计才有意义。

为了加强项目经验

很多公司招聘都需要设计师有项目经验,所以作品集不够丰富的设计师,会去做概念设计,Redsign一些知名项目设计,比如微信、淘宝、facebook等等。但是很多概念设计方案,往往没有体现优势,反而暴露很多视觉缺陷。

这个微信概念设计,颜色很明亮、绚丽,但是有个问题,用户在这个页面更多是关注输入的内容,这里运用这么强的选中效果,很明显干扰了整个输入体验。

还有这个设计,很好的运用了品牌色,很大胆,看起来不错,但是设计上很重,大面积的绿色让人长期使用会视觉疲劳。

这个设计,视觉效果来说非常的好,图形细节、图形饱和度都很舒适,但是忽略了「品牌感」,微信的品牌没有体现,遮住Wechat是否还能分辨出它是微信?可以说它是momo、是微博或者任何一个社交产品。

再来看一些国外的设计,这个视觉效果很好,配色大胆,紫色和红色的搭配在左侧面板上,但是我们应该更加鼓励用户把注意力放在对话面板而不是列表上面,设计师可能觉得这个配色很酷,但是并没有帮助我们解决设计问题,用户并不会因为你的设计很酷,而对你的设计买单。

这个设计配色大胆,布局卡片式,用户焦点也很明显,但问题是改变了用户的使用习惯,把常用的功能都放到了下方,同时右上角、左上角的一些功能习惯全部改掉了。

我们如何去做概念设计?

可能很多人看到这里会想说,说了那么多,我们怎么做概念设计呢,我这里有些大概的思路给大家抛砖引玉下,但不一定完全正确,希望大家可以一起探讨。

一. 品牌感

特别是在做一些知名应用设计时候,一定不要忘记品牌感,品牌就像内衣,看不见但是很重要,我们做任何设计一定是要在品牌定位的基础上去改进的。

Chrome浏览器黑色版本概念设计,我们看得出还是谷歌的品牌感。布局上,操作形式上都很符合谷歌的调性,但是视觉设计师设计又是解决问题的,从布局配色上进行了调整。

Google Bank来自内部的概念设计,不知道最终上线是什么样,但是从概念稿我们不难看出,设计师是在品牌大的框架,大的设计限制下做的改变,整个APP的骨架、栅格、色彩、插画风格都是在已有的设计体系下去做的优化和调整。

二. 确定问题并解决问题

选择一些你比较喜欢的主题去设计,最好是经常用到的APP,比如旅行、美食、音乐、电影、体育的等等。主题确定后,再进一步的探索这些设计使用场景,比如重新设计Instagram,哪些功能用得不爽,以解决问题的思路去设计。

1. 找出问题确定设计目标

设计师Kim在重新设计时就已经明确设计目标:

  • 在发现页面,提供更加有吸引力的无缝体验。
  • 设计更加人性化的界面。
  • 情感化设计。

2. 挖掘设计线索

Kim在设计的过程中与40多个用户进行了访谈,通过访谈去挖掘用户的体验痛点,并去定义一些问题,得到一些大概的方向和体验目标的点。

3. 设计方案设计

整个设计方案和其他概念设计不一样,他是以解决问题为目的去做,每一个设计都是去解决现在线上已有的问题。这个点很重要,我们在工作中不也是如此么,每天的设计是解决产品问题。

可以看出这个设计中在做概念设计的时候,并不像其他视觉设计师,只考虑视觉展现上的表达,而更多的是从挖掘问题本身,通过去发现问题,解决问题思路入手,同时设计方案也保持了ins原品牌的感觉在里面,是一个很优秀的概念设计思路。

4. 挖掘产品体验问题进行系统解决方案

另外一个案例是美国设计师Jason重新设计的Apple Music,同样也是类似解决问题的思路。

苹果音乐改版前,问题在于导航有很大的优化空间,界面比较混乱,设计细节缺失与苹果强调的优雅效果相差甚远,于是他决定改版。

定设计目标策略

他重点从三个纬度进行改版:

  • 品牌感
  • 界面优化
  • 优化发现音乐这个页面

设计方案

他对苹果封面图进行了统一优化,学习了Spotify的处理形式。

△ Spotify音乐封面,品牌感很强。

△ 苹果的音乐封面,看得出很混乱没有规范。

△ Jason优化后,很明显看出对封面进行类型定义,从文案位置版式上进行了统一协调一致。

△ 篇幅有限就不多列举,我们可以从以上2位设计师的设计思路中明显看出:要从品牌视角,从解决问题为主去做概念方案。

三. 寻找设计灵感

前面有强调设计时候注意品牌感,同时我们要去找到已有界面一些体验问题,那么找到了问题,如何去解决,这里很重要一点就是寻找设计灵感。

APPLE MUSIC 的设计师很快从另外一个音乐软

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2018-08-23新人想要入场视频类H5 设计?你需要了解这些
  • 2017-08-06网页无法打开 原来是元素div缺少结束标记
  • 2018-08-23单身设计狗春节自救指南!速看!
  • 2018-08-23这8个字体设计和排版技巧,是2018年的设计趋势
  • 2018-08-23如何构建 Web 端设计规范之文本与选择器
  • 2018-08-23Google I/O即将到来,对于Material Design 2.0我做了这些预测
  • 2018-08-232017年过半,设计师们都跟着这些趋势做设计
  • 2018-08-23腾讯ISUX :2018年的品牌体验趋势
  • 2018-08-23从微信「朋友圈三天可见」,分析背后隐含的设计原因
  • 2017-08-0618套精美的苹果风格免费图标素材分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 企业网站与栏目字典 中英文对照 做中英双语企业网站的朋友需要
    • 以登录账号密码不匹配为例,全面浅析设计背后的逻辑
    • Banner设计宝典系列!玩转9种最常见的设计风格
    • 网易设计师:为什么要成为全价值链的研究员?
    • .html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别
    • 这四个设计师最容易犯的错,赶紧注意一下!
    • 网站图标Icon添加方法!
    • 如何做好电商类App?来看这份对新版淘宝的设计思考!
    • 超全面!13种表单样式的设计方式都在这了
    • 整理了12款Javascript 表格控件(DataGrid)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有