作为一枚界面设计师

我真的很想为UI设计抱不平啊!!

UI设计真是一个备受不解的职业

常会被误解,然后出现以下场景

程序欧巴:

界面画好没?按钮圆的方的不都能用吗?纠结那多干嘛?

产品经理:

这次我们就10个页面,半天能够搞定吧,都有交互了。

其他设计:

你们不就是画线框图吗?我自学半个月都能转行了

仿佛全世界都能做UI设计

只不过你运气好

碰上了这个事少钱多的行业

但讲真,UI设计行业远没有想象的那么简单

举个栗子

当我们设计一个按钮的时候

大家都以为的步骤是:

看看原型图——加个颜色——加个圆角——完工!

但其实真实的情况呢

我们先要确定主题色

“不不不不,绿色太像安全产品了,感觉不符合品牌”

“诶,红色好像也不太好有点警示作用,怕吓到用户”

……尝试24个色之后

“嗯,还是蓝色保险又好看”

黑眼圈*1

然后又开始尝试各种样式

“圆角太大有点幼稚”

“没有圆角又太硬朗了吧”

……尝试24个圆角像素后

“嗯,还是5px的圆角最好看”

黑眼圈*2

最后开始尝试各种效果

“投影远了层级关系太大,不好看”

“投影太浅感知度很弱的,不如不要”

……尝试24个设计效果后

“嗯,勉强就这样吧”

黑眼圈*3

据说当年微博客户端的底部按钮改版

飞机稿壮观成了这样

最后才有了线上这个样子

网传的微博底部改版图

认真的设计精神鼓舞了不少人

说了这么多,还是有人会说:编辑:千锋UI设计

“就是你们UI设计师喜欢瞎折腾”

“按钮深浅有啥影响,能用就行”

“这行业就是很简单,随便入门”

呵呵呵呵呵呵呵

那我们就感受一下

UI设计好坏如何影响到一个产品

以下两个界面来自同样的交互文档

但为什么左图看上去就低端一些呢

这就是大家留意不到的设计细节

看似无关痛痒的地方

就决定了一个UI设计的好坏

除了右图的简约调整方向

UI设计师还能从细节着手

将整体上升一个level

即使不用操刀大改

只是调色调位置也能有不一样的效果

所以是时候放出这张经典的图了

好的设计都是存在于细节当中的

小提示:Average Design 与 Good Design 的区别在于 Good Design 在高度上并不是等高的。矩形因为图形特点,在同等宽高的情况下会占有更多的像素,而圆形与三角形如果还保持等高的状态,就会显得小很多。

So 还会觉得UI设计是画线框图那么简单吗

UI设计不就是画线框,凭什么年薪30W?的更多相关文章

  1. UI 设计的整个工作流程是怎样的?

    作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个 ...

  2. 不得不存!UI设计新手不可错过的7条实用法则

    http://www.gameres.com/316761.html 本文编译自 Medium,作者是一位UX(User Experience, 用户体验)设计师,他通过自己学习UI设计的过程,总结出 ...

  3. 缩放因子和UI设计

    一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c, ...

  4. APP UI设计及切图规范

    APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...

  5. UI设计中px、pt、ppi、dpi、dp、sp之间的关系

    UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众 ...

  6. 21个免费的UI设计工具和资源网站,不管是web,js,android都

    本帖最后由 hua631150873 于 2014-9-12 18:26 编辑 Lumzy 官方地址:http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具.使用Lum ...

  7. Android 高级UI设计笔记07:RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

  8. 国外一些好用的UX/UI设计工具和资源分享

    国外一些好用的UX/UI设计工具和资源分享 你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.今天分享的这些U ...

  9. UI设计(流程/界面)设计规范

    1.UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性. 1.2范围  ...

随机推荐

  1. ORM PetaPoco 框架的 CRUD 操作

    PetaPoco 的查询操作 public IEnumerable<T> GetAll(string sqlString, object[] obj) { try { IEnumerabl ...

  2. python应用之爬虫实战2 请求库与解析库

    知识内容: 1.requests库 2.selenium库 3.BeautifulSoup4库 4.re正则解析库 5.lxml库 参考: http://www.cnblogs.com/wupeiqi ...

  3. java技术-重点方向

    多线程 锁 事务 缓存 hashmap 并发编程

  4. JQ-用户注册用到的图形验证码,短信验证码点击事件,切换active类

    // 点击切换图形验证码 页面加载完后执行,类似window.onload $(function () { var imgCaptcha = $(".img-captcha"); ...

  5. Tornado之链接数据库

    5 数据库 知识点 torndb安装 连接初始化 执行语句 execute execute_rowcount 查询语句 get query 5.1 数据库 与Django框架相比,Tornado没有自 ...

  6. docker 简单入门(一)

    本篇目录 写在最前面的话 docker概念介绍 镜像的概念.容器的概念 docker的安装介绍 写在最前面的话 大家好,首先跟大家说声对不起,我班门弄斧了,我本身是做系统开发,使用的语言是C#和JAV ...

  7. Java工具类实现校验公民身份证的有效性

    转自:https://www.oschina.net/code/snippet_1859292_39120 1 package com.tg.user.controller; import java. ...

  8. DOS系统变量

    %ALLUSERSPROFILE% : 列出所有用户Profile文件位置.%APPDATA% : 列出应用程序数据的默认存放位置.%CD% : 列出当前目录.%CLIENTNAME% : 列出联接到 ...

  9. as3 文档类引用

    /**文档类引用**/ public static var main:CoverMain; public function CoverMain() { main=this; }

  10. install命令

    install 1.作用 install命令的作用是安装或升级软件或备份数据,它的使用权限是所有用户. 2.格式 (1)install [选项]... 来源 目的地 (2)install [选项].. ...