作为一枚界面设计师

我真的很想为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. c++官方文档-模版类

    #include <iostream> using namespace std; template<class T> class MyPair { private: T t[] ...

  2. uva-10047

    我们考虑一个特殊情况,一个独轮车是一个圆环,独轮车靠这个圆环运动,这个圆环上涂有五个不同的颜色,如下图每个颜色段的圆心角是72度,这个圆环在MxN个方格的棋盘上运动,独轮车从棋盘中一个格子的中心点开始 ...

  3. 20.OGNL与ValueStack(VS)-普通方法访问

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 首先在User中增加一个成员方法,代码如下: public String g ...

  4. 7. mybatis实战教程(mybatis in action)之八:mybatis 动态sql语句

    转自:http://www.kyjszj.com/htzq/79.html 1. if 语句 (简单的条件判断) 2. choose (when,otherwize) ,相当于java 语言中的 sw ...

  5. H5-DataUrl FileReader

    DataUrl: 将二进制文件流以字符串的形式存在,如果是图片可以在页面上展示.经常用于Canvas截图或画图展示用. 格式:data:image/png;base64,****. /** * dat ...

  6. iPhone launch screen,self.view.frame.size

    在工程文件中找到以下设置 "Launch Screen File"只支持iOS8以上版本,如果用之,则self.view.frame.size返回的结果为正常的当前view尺寸. ...

  7. attr 修改IMG src

    jQuery修改img的src的方法:$("#img_id").attr("src","new_src"); 定义和用法 attr() 方法 ...

  8. Erlang/OTP:基于Behaviour的回调函数

    原始链接:https://blog.zhustec.me/posts/erlang-otp-1-callback-based-on-behaviour OTP 是什么 OTP 的全称是开源电信平台 ( ...

  9. linux文件格式转换:<U+FEFF> character showing up in files. How to remove them?

    You can easily remove them using vim, here are the steps: 1) In your terminal, open the file using v ...

  10. Null value was assigned to a property of primitive type setter of"原因及解决方法

    在action请求数据的过程中报出"Null value was assigned to a property of primitive type setter of"错误,搜索之 ...