作为一枚界面设计师

我真的很想为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. django框架预备知识

    内容: 1.web预备知识 2.django介绍 3.web框架的本质及分类 4.django安装与基本设置 1.web预备知识 HTTP协议:https://www.cnblogs.com/wyb6 ...

  2. HAproxy使用

    参考官网 安装HAproxy/ pull 官方镜像 本地安装:本地安装路径:/usr/local/haproxy/配置: 添加:/usr/local/haproxy/conf/haproxy.cfg添 ...

  3. 42. linux下数据库服务启动

    进到bin目录运行 emctl start dbconsole oracle@suse92:~> sqlplus /nolog SQL*Plus: Release 9.2.0.4.0 - Pro ...

  4. jquery easyui iconcls(小图标)属性的设置

    今天用easyui做accordion的时候,觉得它自带的图标不够漂亮,想换成自己的图标,可是菜鸟我不知道怎么设置,上网查找,因为问题太水了,找不到,只好自己摸索,现在终于解决了,所以记录下来,同时也 ...

  5. leetcode171

    public class Solution { private int ConvertToC(char c) { ; switch (c) { case 'A': case 'a': rnt = ; ...

  6. NavitForMySql 破解工具使用

    Navicat 11.0注册机使用教程: 1.右键-管理员权限运行注册机2.选择对应的产品3.点击“补丁”按钮,选择文件4.点击“生成”按钮,生成序列号,并保存下授权文件5.复制序列号,打开软件,在弹 ...

  7. xe7 Unresolved external CSPIN.OBJ

    工程里打开使用了CSPIN控件的界面窗体,再编译就好了 [ilink32 Error] Error: Unresolved external 'Vcl::Controls::TControl::Set ...

  8. python 3 属性查找与绑定方法

    1.属性查找 类有两种属性:数据属性和函数属性 (1)类的数据属性是所有对象共享的 #类的数据属性是所有对象共享的,id都一样 class OldboyStudent: school='oldboy' ...

  9. jqGrid 使用案例及笔记

    jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信. 一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文 ...

  10. leader 选举机制

    from: http://www.jasongj.com/2015/01/02/Kafka%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90/ 一种非常常用的选举leader的方 ...