阅读 3714

聊聊我和 UI 撕逼的经历~

这么可爱一定是男孩唧~ O(≧口≦)O

本文纯吐槽,算是我对 UI 的声讨,啥时候我能碰上一个懂行、靠谱的 UI

参考资料

幸好没事我会看看微信公众号:UI设计达人 上的文章,要不今天我可以写不出自己的心声 (>▽<)

最怕 UI 冒傻气

我也换过几个公司了,项目也做过几个了,可惜每次碰到的 UI 都是 XX 没脑子的,哎你问脑子去哪了:被僵尸吃了 *(  ̄皿 ̄)/#_

就像我喜欢听的《三十》---> 2B青年欢乐多,我究竟为谁活着,总感不到快乐,我像个傻子一样重复

为什么,我想过,我一个2B青年为什么不快乐呢 w(゚Д゚)w 自娱自乐都不香了,真的像个傻子一样翻来覆去、一遍遍改一样的代码 O(≧口≦)O 为什么,就是因为万恶之源:UI

软件生产虽然不像生产线那样工位严格、组织严密,但是也是环环相扣的一个流程。上游思想被一步步、一层层、包装、转换、成最终 app。这更像是一个弹性的流水线,所以大家都自嘲码农搬砖的拧螺丝的。但是只要有一个环节出问题,有一个环节的人脑子宕机了,大家都会受影响,下游环节尤其明显

我希望下面2张图能帮我把大家带入情节,UI 突然抽风了,后面的 coder 和 测试 就要脑淤血了...

让人郁闷的 UI 日常

1. 茫茫多的颜色值...

啥也不说,先看看这颜色值

    <color name="black">#000000</color>
    <color name="transparent">#00000000</color>
    <color name="black_4d4d4d">#4d4d4d</color>
    <color name="black_464646">#464646</color>
    <color name="quan_shop_color">#6ec0e6</color>
    <color name="gray_747474">#747474</color>
    <color name="half_transparent">#88000000</color>
    <color name="white_89">#89ffffff</color>
    <color name="gray_9d9d9d">#9d9d9d</color>
    <color name="gray_989898">#989898</color>
    <color name="gray_6d6d6d">#6d6d6d</color>
    <color name="gray_fffaf8">#fffaf8</color>
    <color name="gray_FFFBF2">#FFFBF2</color>
    <color name="gray_E8E8E8">#E8E8E8</color>
    <color name="gray_D7D7D7">#D7D7D7</color>
    <color name="guids_tv_or">@android:color/darker_gray</color>
    <color name="guids_btn_phone">@android:color/holo_blue_bright</color>
    <color name="guids_bg_or">@android:color/transparent</color>
    <color name="guids_bg_phone">@android:color/transparent</color>
    <color name="guids_btn_weixn">@android:color/white</color>
    <color name="gray_b4b4b4">#b4b4b4</color>
    <color name="gray_ff">#ffcccccc</color>
    <color name="gray_cacaca">#cacaca</color>
    <color name="gray_e0">#e0e0e0</color>
    <color name="gray_f0f0f0">#f0f0f0</color>
    <color name="red_e05d5d">#e05d5d</color>
    <color name="red_7440">#ef7440</color>
    <color name="red_ed">#ed8457</color>
    <color name="common_quan_color">#edbb72</color>
    <color name="eec293">#eec293</color>
    <color name="line_spliter">#efefef</color>
    <color name="f57878">#f57878</color>
    <color name="ff4040">#ff4040</color>
    <color name="colorAccent">#FF4081</color>
    <color name="pure_orange">#ff800e</color>
    <color name="yellow_ffb770">#ffb770</color>
    <color name="right_yellow_1f">#ffba1f</color>
    <color name="e3163e">#e3163e</color>
    <color name="pure_yellow">#ffff00</color>
    <color name="colorPrimary">#ffffff</color>
    <color name="white">#ffffff</color>
    <color name="fbfbfbf">#fbfbfb</color>
    <color name="f7f7f7">#f7f7f7</color>
    <color name="main_808080">#808080</color>
    <color name="main_fd5856">#fd5856</color>
    <color name="main_008EFF">#008EFF</color>
    <color name="main_ff0000">#ff0000</color>
    <color name="red_FF5001">#FF5001</color>
    <color name="main_ffd44a">#ffd44a</color>
    <color name="main_f5f5f6">#f5f5f6</color>
    <color name="main_ff673e">#ff673e</color>
    <color name="main_c3c3c3">#c3c3c3</color>
    <color name="main_3c3c3c">#3c3c3c</color>
    <color name="main_fffcf4">#fffcf4</color>
    <color name="main_616161">#616161</color>
    <color name="main_a87c1c">#a87c1c</color>
    <color name="main_615c4c">#615c4c</color>
    <color name="main_86784b">#86784b</color>
    <color name="main_fffbec">#fffbec</color>
    <color name="main_ffeba1">#ffeba1</color>
    <color name="main_fafafa">#fafafa</color>
    <color name="color_EFEFEF">#EFEFEF</color>
    <color name="color_FA415B">#FA415B</color>
    <color name="color_F93A54">#F93A54</color>
    <color name="color_FF1D00">#FF1D00</color>
    <color name="weather_color">#FF1D00</color>
    <color name="weather_text_color">#5C584C</color>
    <color name="gray_9B9B9B">#9B9B9B</color>
    <color name="gray_d6d6d6">#D6D6D6</color>
    <color name="gray_FBFBFC">#FBFBFC</color>
    <color name="gray_F3F3F3">#F3F3F3</color>
    <color name="gray_F5F5F6">#F5F5F6</color>
    <color name="gray_F8F8F8">#F8F8F8</color>
    <color name="black_515151">#515151</color>
    <color name="call_phone_bg">#FF9500</color>
    <color name="call_recently_bg">#FD6F21</color>
    <color name="switch_btn_bg">#6EDD6E</color>
    <color name="smart_life_bg">#F5FCFF</color>
    <color name="one_key_net_bg">#FFF9F5</color>
    <color name="gateway_setup_text">#EF7440</color>
    <color name="gray_7c7c7c">#7C7C7C</color>
    <color name="gray_aeaeae">#aeaeae</color>
    <color name="gray_bfbfbf">#BFBFBF</color>
    <color name="gray_9C9C9C">#9C9C9C</color>
    <color name="gray_F0F0F0">#F0F0F0</color>
    <color name="gray_818181">#818181</color>
    <color name="black_4D4D4D">#4D4D4D</color>
    <color name="tab_selected_color">#FFB246</color>
    <color name="my_equipment_tab_bg">#FFFDF3</color>
    <color name="equipment_place_bg">#ED8457</color>
    <color name="index_title_bar_text_color">#272727</color>
    <color name="inner_goods_bg">#FCFCFC</color>
    <color name="weather_blue">#0085FF</color>
    <color name="gray_808080">#808080</color>
    <color name="origin_EE7643">#EE7643</color>
    <color name="iit_default_selected_text_color">#0086ff</color>
    <color name="iit_default_deselected_text_color">#333333</color>
    <color name="color_FD5656">#FD5656</color>
    <color name="color_FFB362">#FFB362</color>
    <color name="color_9B9B9B">#9B9B9B</color>
    <color name="color_929292">#929292</color>
复制代码

大家有啥感想没有,UI 出图也不给颜色值,说过多少次了,就说让开发自己吸去,还说我们懒。可是 UI 出的那图给颜色也太随意了,大家看看我们吸出来的这些颜色值,一个灰色就有十来种。项目也不是一个人开发的,混乱、茫茫多的颜色让我们每个人都无所适从。从给颜色命名,大概能感受到当时我们内心的绝望吧,鬼都不知道这个颜色是给谁用的,怎么起名那是死了无数脑细胞啊,后来我们都绝望了,随便起名了,规范啥的都见鬼去吧...

转折111111来了 --> 突然有一天 UI 说,要让我们改颜色,下划线的灰色统一改成其他颜色,o(≧口≦)o 这就是我当时的心情,你妹的给项目搞得这么乱,谁知道哪个、或者哪几个灰色是下划线用的,我说你告诉我哪个改成哪个,他不管,这是开发自己的事,也的确是我们自己的事,但是这锅我们不背

转折22222来了 --> 突然有一天 UI 说,我们要上夜间模式,改 NMB,啥样自己心里没点数嘛,怎么改......最后还是逃不了。整整3天啥也没干,每个 view 挨个对颜色值、改颜色值。改完了总觉得哪里不对,但就是找不着,UI 说就这样吧......

2. 就是不走寻常路...

找不到之前的切图了,我就文字描述下吧。3种类别的商品页面,每个页面都有一个显示商品描述信息的 viewGroup。大家可能想不到,3个页面的这个 viewGroup 居然张的都不一样。还不是彻底不一样,而是内容 tab 都一样,但是 tab 之间的位置不一样

我去问 UI 为啥不能设计成一个样子,这样我好做成公共组件复用。UI 说我想怎么画就怎么画,我从来不走寻常路,就得不一样才能体现出我的设计能力

3. 我忘了之前怎么画的了...

还是上面这个用来显示商品文字信息的 viewGroup,过了很久新添加一种商品类型,页面要新作。新的商品页面也有这块内容,但是设计稿拿过来一看,不光 tab 之间位置依然不一样,部分 tab 还换了

去问 UI,相同级别的页面为啥新的和以前的设计差距这么大,用户看了感觉岂不是很突兀、很别扭。UI 说时间太久了,忘了之前怎么画的了,从心随便画画...

大家不知道当时我这个心情啊,也就是以前脾气好,放现在直接拿键盘开抽。这样的设计真是只能处处 copy、 处处改,根本就没有整体考虑,页面一多,别说我就是 UI 他也分不清哪对哪了。抽象公共UI组件想都不要想,页面复用那都是没有的事

4. 看着就是别扭...

我司的 UI 非常有个性,就是追求和别人不一样,飞得反着来,举个例子,页面间距从来没有统一过,时间久了找不到设计图了,我记得公司邮箱一直有用户反馈,app 看着就是别扭...

我理想中的 UI

像上面这样的事多了,很多都想不起来了。我第一家公司碰到的 UI 简直极品,后面的虽然没这么变态,但是也没好到那去 (*  ̄︿ ̄) 就没有靠谱、真正懂设计的 UI 让我碰到吗?难倒非淂进大厂才行,我非常期待高水平的 UI 设计师,想看看这样的人是怎么工作的 ヾ(≧O≦)〃嗷~ 学习一下

作为软件生产流水线中最重要的一环:开发,其他环节都应该向开发靠拢。尤其是和开发联系至关紧密的 UI 设计,我希望 UI 能和 coder 一道拥抱相同的开发思路,这样才能设计出符合代码开发规则的 UI 设计稿,才能让开发飞起来,才能满足未来复杂多变的需求变化

和 UI 撕逼、互喷、键盘互怼,这些日常互动就不说了,我希望 UI 设计师是下面这样的 ┗|`O′|┛ 嗷~~

首先遵循一致性原则

资料:UI设计中一致性如何做?看这篇就够了

我摘取一部分

我们遵循一致性原则的目的是为了减少用户认知负荷,用户能够轻易上手使用产品,熟悉的导航路径,熟悉的设计模式,不要搞那些让大家猜不到,搞不懂的设计

  • 重复间距:

  • 重复控件:

  • 布局规则:

其次要有组件思维

前端早就诞生了组件思想,UI 作为设计前端的难倒不应该遵循组件思想嘛~ 还好设计界早就诞生了组件思想,我很喜欢这篇文章,一直保存着,捧为至宝:基于组件的设计方法

核心思想就是 UI 设要和前端开发一样,以组件为核心要素,在组件的基础上构建自己的风格,可以设计多个风格,风格之间的切换应该便利,不应该给开发带来巨大的额外负担,否则就是 UI 的不合格

实际基于以下6个部分思考:

  • 一致性(Identity)
  • 元素(Elements)
  • 组件(Components)
  • 构成(Compositions)
  • 布局(Layout)
  • 页面(Pages)

1. 一致性(Identity)

是指 字体、排版、主色、辅助色,这些都会被详细规定好,定义之后,这些规则将会在整个项目中贯穿执行

**2. 元素(Elements) **

是指 按钮、链接、输入框、下拉框等等,它们的样式、状态都是需要被定义好,比如按钮悬停、获得焦点、禁用的状态,一旦定义了(这些元素),就要在整个项目中循环重复使用它们

**3. 组件(Components) **

是指 工作中主到次都分成组件(Components),当我们设计 app 或者 web 的时候,在页面上最多的就是组件,一个组件至少需要几个元素构成。譬如像卡片、导航栏都是一些常见的组件,这些组件贯穿整个系统要模块化使用

**4. 构成(Compositions) **

是指 多个组件组成了构成,就像不同 item 组成的列表,贯穿整个系统我们也要模块化、循环使用他们

**5. 布局(Layout) **

是指 页面应该遵循统一的排版原则,让页面之间看起来协调一致

**6. 页面(Pages) **

是指 在整个项目的维度,我要也要模块化、复用这些页面

基于组件的思想,对 UI 设计师要求很高,但是对于后面开发环节至关重要,可以节省大量开发和之后调整的时间,最重要的是让 UI 的变化不再是个令人讨厌的负担

再次基于全局构建自己的风格

在前面组件思维基础上,我希望 UI 可以站在整个 app 的高度,统一构建自己的风格出来,不要再让 coder 去猜、去懵。正是由于 UI 不愿意、不配合、自己没有清晰的认知,才给下游部门造成负担,这种负担会逐级递增。这也算是沟通失效带来成本提升的一种体现

UI 一样也要有自己的 UI 设计文档,下面的图找的可能不是特别合适,大家脑补理解 ヾ(≧O≦)〃嗷~

1. 要有整体颜色标识

必须明确:哪种颜色给哪种 view、哪种级别、哪种场景使用,然后清晰声明出来

2. 要有整体文字大小、页面排版、间距标识

必须明确的给出上述所有参数,并图示

3. 颜色应用要相互配合、成体系、最终汇聚成一种风格

必须明确:每种风格的颜色搭配要有明确的示意图以便其他人理解

4. 要基于整体构建组件并在整个app、甚至全平台复用

必须明确:这点对于 coder 至关重要,只要 get 到 UI 设计的点,那么就能精准构建公共 UI 组件库了,可以减少不少重复工作,代码能看着也能干净不少。更重要的是可以在 app 业务确定之前,就开始构建出 UI 框架,真正的实现敏捷开发

一些细节,比如 dialog 也要有基于全局考虑,并给出图示:

5. 最终要结合颜色、组件,每一种风格要给出图示

这个不好找图,这张大家凑合看吧,脑补下~ ![]

6. 要统一整体的 icon 设计、圆角、阴影、大小等

我非常喜欢下面图中自如的设计感觉,看着很讨好眼镜,看着不累

7. 最好能在整个公司、业务、平台发展的角度设计

UI 设计师经过充分的和产品、业务、管理讨论后,应该明确理解整个产品线,UI 设计要基于整个产品线展开。要考虑有几个 app、哪些 app 先开发、哪些 UI 组件、页面要整和到整个平台使用。这些要明确的给到 coder,设计 app、平台框架时要充分考虑 UI 给出的指导:哪些组件是公共 moudle;公共 moudle 的设计、编写、规范;view 的替换、复用、无痕切换、热修复;开发组织等很多问题...

我理想的产品

说到这里,不光是 UI,产品我也想吐槽下,我希望产品能提供更加详细的文档、图文资料。我司业务流程图,产品总是在原型图写几行字就完事了

1. 业务流程图/功能泳道图

我希望是下面这样的,难倒只有进大厂了吗?但是大厂不要我呀 ( _ _)ノ|

2. 页面流程图

这个其实很重要,新人进来、同组人员交换业务都非常需要这张图,能大大提高我们熟悉代码的速度

3. 页面交互示意 GIF

说真的有时真的 get 不到产品或是 UI 的交互的思路,我多么希望产品、UI 能提供一个 git、或是演示,让我省省脑细胞,一个 gif 胜似万千文字,一图道尽所有,简单快速有效

最后

没了,就写到这里了。阿里土话:当你觉得不舒服的时候,就是成长的时候。 一个人四平八稳时,很难获得成长。我现在没事会尝试写写那些不熟悉的领域

写这篇文章虽然有经验可用,但是也是看了很多讲产品的资料,吸收了一些知识才总算是把自己的想法写出来。这篇博文也是耗费一番心血,写完之后感觉豁然开朗,眉头的阴云都消散了一部分~