欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > 分享 >

翻译:优质UI的7条准则(一)

发布时间:2015-07-28  编辑:杨雨个人博客网站   点击:   

固然是译文,可是我在字里行间里也会插手本身的一些观点。

简介

起首,这个教材并不合用于全部人,他首要是为了:

那些想要驾轻就熟地建造出大度 UI 的措施员

那些想要本身的产物集超出凡人的 UX 计划师,或是那些想要计划出优于知名 UI 库的交互的人。

假如你是一个计划学院的门生可能以为本身是一个很不错的 UI 计划师,那么你大概会认为这篇文章有点乏味,错误乃至是令人反感的。不外,anyway。

那这些准则可以汇报你什么?

起首,我曾经是一个完全没有 UI 技能的 UX 计划师。虽然,我热爱计划交互,但我之前并没有很重视他直到发明计一律款好的交互有许多的甜头。

我当时的 portfolio 的确不堪入目,很难反应出本身的头脑和全力

那些 UX 的客户乐意去付出一小我私人的专业技能而非他涂涂画画

有朝一日大概我还想创业,那就必然得搞定这个技能

我和许多人一样,有一个接口,那就是我对“美”没有观念。作为一个工程师、措施员,做一个其丑无比的样式的确像是先天。

最后,和进修其他的缔造性事变一样,我也把握了一些美学的尺度:他们尺度化,必要当真的思索。并去小心那些展示结果很棒的计划。因此,在被付出1个小时的薪酬下,我用了10个小时来研究一个 UI 项目,而多出的9个小时则是无尽地进修。玩命地在 Google, Pinterest 和 Dribbble 上去搜刮、剽窃那些乐成的计划。

而这个文章里的“准则”就是从这些多余的进修中总结出来的。@那些“nerds”,假如你认为我此刻做的 UI 计划确实不错,那是由于我用了好久地时刻去思索和说明,而非找到了什么秘诀或是神乎其技的直觉。

这篇文章也非理论,而纯真的是一些应用层面的指导。以是你绝对看不到啥黄金支解,更不会有什么配色,独一必要的就是进修、说明、实习。

做个比喻,如本的柔道经验了几个世纪的成长,内里蕴含着武道、哲学的头脑。你去上柔道课,除了击败敌手,也会学到许多关于手段活动、均衡的常识。而这篇文正里的内容更像是 Krav Maga(一种自卫搏击术),它发现与1930年月的捷克讨论,用于抵御纳粹。这种波技手段没有任何的“原理”,你所要学的就是用尽一路要领干掉敌手。

准则一:光是从上方照下来的

阴影可以很是有用地让人类大脑去快速说明领略一个 UI 里的元素。

这大概一个很是重要的、但被人忽视的 UI 准则:光从上天上照射下来。当光从上测照下,物体的上面被照亮,而下面会被映出阴影,因而上端颜色略浅,下端略暗。假如翻转过来,你也许会追念起那些可怕影戏里,用手电筒自照的女子。

在 UI 计划里这是同理。为全部的页面元素的底边加上一点点的阴影,就会让统统有一种 3D 结果。

1-DTB4xeMLpg0DW6NLOYBehw

譬喻这个简朴计划过的buttons:

Button 未被按下 时,底边有一个玄色作为明暗接壤。

Button 外貌的颜色也从上到下有一个由浅变深的渐变结果,从而展示出了一个微曲的弧线。

Button 未被按下时下端有一块明晰的阴影,来暗示光被遮挡。

Button 被按下时,整个外貌夜色加深,但上下浅深稳固相关。类比于,当按键按下时手会遮挡一部门光泽。

这样的光影结果可以被应用于许多处所。

1-4FCAIgmJa8BuildjlnsDeA

譬喻 iOS 6 里的开关计划,你可以明明感受到内嵌的按钮通广上端的光纤泛起出拟物立体感,而这个中包括着许多许多的结果:

开关上测的边檐映下来一段小的阴影

ON 内嵌留有误差

ON 泛起凹型,且底测有光泽

Icons外凸,且边框内的亮白表现凸显了光强

整个内侧的支扫除有小凹槽,表现了一个很小的阴影。

同样的计划也呈此刻下图中:

[

1-gWuSN3QN9dSeVwSP2LZVow]

那些内嵌的元素:

字符输入框

按下的 buttons

滑轨的滑扭

未选中的 radio button

未选中的 checkboxes

那些外凸的元素:

未按下的 buttons

滑轨的 buttons

下拉菜单的按键

卡片

radio button 的按键部门

弹出框

这样的计划险些四处可见。

那么题目就来了?Flat Design 是咋搞的?

iOS 7 的非尺度扁平化计划惊动了整个技能计划界。在没有凸起和内嵌的天下里,只剩下了简朴的直线、几许图形和纯色。

1-YAB8zDDxCmvegvxCu7d8kw

我同样喜好简朴干净的计划,可是这也许不是一个恒久的潮水,由于抽象出来的类 3D 结果肉眼看起来惬意太多了。而更有也许的是,那种半扁平的计划将会主导计划气魄威风凛凛,而这种气魄威风凛凛被我称作 “flatty design”。它维持了干净简朴的观感,可是较为隐晦的阴影会凸显那些 点击、滑动、点触的结果。

1-gWvCSNxqNjyYaq4IF31ZhQ

当我在写这篇文章的时辰,Google 为其全产物线推出了他们的计划说话 “Material Design”。这样一种同一化极高的计划气魄威风凛凛着实就是在探求一种高度抽象的光影色彩来模仿实际天下。

全部的 Material Design 展示、讲授中都明晰地表达了差异高度下气魄威风凛凛的特点:

1-TtuBo6cCUTyP8XIYGSrIyg

这种 玄妙 的样式变革,揭示了一个全新的但又更贴近实际的计划气魄威风凛凛。当日,这和 2006 年的电脑界面差异,当时没有纹路、渐变色和光芒。

Flatty将会引领将来,那扁平计划呢?哈哈,着实早就实现啦:

1-Zqcjyz-oIqZZojyYyWVl2Q

本文地址:http://itbyc.com/share/2656.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1