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

为什么你做的设计总是不耐看?

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

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

@菜心设计铺?:不知道大家有没有这样的情况发生,自己设计的作品,“乍一看不怎么样,仔细一看,还不如乍一看”!

其实不耐看,或者不敢放大看的原因都是细节做的不到位。

最近在做手机OS的主题图标,对细节的感触很大,今天结合主题图标来和大家聊聊,我们可以从哪些方面注意自己的设计细节,大纲如下:

  • 给造型加点细节
  • 多加点质感的细节
  • 不要让图标看着灰灰的
  • 风格特点的运用

1. 给造型加点细节

造型是所有设计执行的第一步,造型做不好,说别的都没用。

那如何能给造型加点细节呢?

打个比方,我们要画一个圆角矩形:

哪个更有设计感,更有细节呢?当然是第二个,第一个一看就是默认的圆角,没有细节可言,放在真正的案例中就像下图一样:

如果 youtube 的图标用了第一个普通的圆角矩形,可能就有现在那么耐看了!

造型加点细节,你也可以理解为,别让造型太普通,比如,我们要做一个定位图标:

这是一个很常见的定位图标,在图标网站上一搜一大把,那如何让他变得不那么普通呢?看下图:

首先比例上可以做点事情,比如拉长,之后在线条上再做点文章,比如给直线加点弧度,最后就得到了一个看起来没那么普通的定位图标了,它就是谷歌地图上面的一部分:

方法不止一种,大家可以多思考总结,观察优秀的设计,借鉴他们,然后超越他们!

2. 质感的细节

假设我们现在做一个文件管理的图标:

这就是一个细节很少的普通图标,我想在这个图标上面加一些轻质感,如何做呢?

例如转折处加一点高光:

例如纽扣加点真实的效果:

再例如加点渐变折叠的设计语言,来丰富层次:

优化前后的图标对比如下图:

这样看着就显得精致、专业多了!

但这里需要强调一点,由于我的前期风格定位是轻质感与轻拟物,所以加了一些质感的细节,但并不完全适用于任何场景,所以大家一定要具体场景具体分析哦!

3. 不要让图标看着灰灰的

有的时候颜色用不好,很容易就使图标变脏了。

这里我们要记住两点,一个是增强主影响与图标背板的对比度,二是主形象一定要尽可能的提亮突出。

举个例子,下图是一个相机的图标:

这个图标存在的问题就是摄像头与背景对比不够强,粘在了一起,使整体看起来灰灰的,尤其是在饱和度较高的背景上面,为了提高对比,要么让摄像头颜色变浅,要么让背景颜色变浅,我原则第二个方案,把背景颜色变成白色,如下图:

这样看着就好多了,但是放在纯黑色背景下,我们会发现,好像摄像头的颜色还是有些灰,不够明亮,那我继续将其提亮,如下图:

这样整个图标就做的差不多了。

所以,大家一定要让图标的层次拉开,该亮的地方亮起来,该暗的地方暗下去,大胆果断一点,都是80、90后,咱怕啥!

4. 关于风格特点

有些时候,即使图标的造型没有特别惊艳,如果能赋予一个统一的风格特点,也会使图标看起来非常出彩。

关于风格特点,举几个例子,比如颜色:

△ ?大空逸_kin 作品

高级灰的颜色就是这套图标很重要的风格特点。

形状:

△ ?09ui 作品

这套图标得风格特点就是和六边形形进行结合。

纹理:

△ ?kidaubis作品

柔和的渐变就是这套图标的风格特点。

如果用户看了你的设计之后,没有任何记忆点,那就基本上是没啥风格特点了,所以前期规划时一定要考虑好!

总结

我们在欣赏别人优秀的作品时,不是随便看看就好了,不仔细分析,很难看出里面的细节,而如果你一直不注意细节,作品怎么可能会精致耐看呢?对不对!

欢迎关注作者的微信公众号:「菜心设计铺」

「菜心设计铺的进阶好文合集」

  1. 《帮你做能落地的界面设计之输入框》
  2. 《帮你做能落地的界面之TAB的小短线》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

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

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

相关文章

  • 2018-08-23超全面!值得新手学习收藏的平面设计版式法则大全
  • 2018-08-23科普好文!作为UX设计师你需要知道的52个专业术语
  • 2018-08-23用Instagram 的案例,帮你学会专业科学的重设计过程
  • 2018-08-23上亿人使用的QQ空间萌宠形象,原来是这么设计出来的!
  • 2018-08-23设计实战!扁平风的手机赛车游戏UI界面是这样设计的
  • 2017-08-06关于门户网站焦点图设计的一些总结
  • 2017-08-06Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 2018-08-23想成为交互设计师?来看前辈的入行心得!
  • 2018-08-23想让你的网页设计脱颖而出,可以从这5个维度入手
  • 2018-08-23将爱豆的照片转成人物插画?这可能是最简单的方法!

文章分类

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

最近更新的内容

    • 基础小课堂!从零开始教你做高保真原型图+UI 设计规范
    • 超实用!6个小技巧帮你打造高转化的网站落地页
    • echart主题工具的使用
    • 用户研究如何入门? 来看爱彼迎用研的回答!
    • 实在干货!为老年用户做体验设计应该注意的6个细节
    • css样式div或li在ie6下背景平铺及border边框断线解决技巧
    • 口碑炸裂的《一出好戏》,电影海报也超棒!
    • 搜索引擎免费收录网站入口小集
    • 用58同城的实战案例,带你认识完整的改版流程!
    • 模板和UI Kit 还能从这7个方面帮你创造价值

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

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