• 中央组织部划拨中管党费用于纪念建党95周年走访慰问老党员和生活困难党员 2020-02-19
  • 转方式调结构显现阶段性成果(读数·发现经济运行的轨迹) 2020-02-19
  • 越冷越嗨!跟着彼得潘去无人岛冒险吧!早鸟票抢先购彼得潘 2020-02-15
  • 人民日报:70年正青春,不停步向未来 2020-02-15
  • 《扶摇》撞档世界杯 战将杨幂女子力燃情五洲 2020-02-12
  • 高校招生章程看不出重点? 专家为你解读其中关键词 2020-02-12
  • 内蒙古打掉涉黑涉恶组织团伙348个 2020-02-04
  • 台媒曝吴建豪离婚 百亿身家娇妻收两封离婚协议书 2020-02-04
  • 火箭军官兵牢记强军目标 建设世界一流战略军种 2020-01-29
  • 河北阜城:“粽情飘香”敬老院 2020-01-27
  • 工信部:鼓励婴幼儿配方乳企质量安全追溯体系建设 2020-01-20
  • 公然侮辱救火牺牲消防战士 一网民被拘15日罚款1000元 2020-01-09
  • 河南省委省直机关工委召开br“学习弘扬焦裕禄同志的‘三股劲’加强机关作风建设”座谈会 2020-01-09
  • 洞庭湖3万亩“私家湖泊”事件续:当地拆除矮围7200米 当事人被刑拘合同将解除 2020-01-05
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2020-01-05
  • UI设计的7条“规则”【一】

    2014-12-03 11:39 稿源:ui.cn  0条评论

    介绍

    事先声明,这篇入门文章不是为所有人准备的,适用人员如下:

    开发者:想为自己的作品设计优质界面却不得法

    用户体验设计师:想让自己的作品比大师级PPT更加美观?;蛘呤且丫⑾秩认返慕缑婧吞逖樽苁峭昝澜岷系纳杓剖?。

    如果你是一个艺术学校毕业生或者是一个成熟界面设计师,那么你很可能会觉得这篇入门文章无聊、错漏百出,令人恼火。这没关系,你所有的看法都是对的,那么就请点击上方的“关闭页面”吧。

    让我来告诉你你会在这篇文章中了解什么吧。

    首先,我是一个没有用户界面设计技能的体验设计师。我热爱我的职业,但是我并没有很多工作经验,因为我以前不知道美观界面的意义:

    当时作品没水平,反响不好,急需改进。 我的潜在客户更愿意去用一些不仅仅只会画交互原型图的设计师的作品。 难道我想一直当一个菜鸟吗?当然是想成为中流砥柱了。

    我有自己的理由:我不了解垃圾美学,因为我专攻于工程学——难看的设计几乎是它成功的标志。

    后来我同样研究了一些看起来好看的APP,我从中得到了一些创造性的发现:完全的、理性的分析。然后不好意思的借鉴了一下。我曾经在一个UI项目上花费了十个小时,其中九个小时在疯狂的学习,一个小时在制作——绝望的在谷歌、图钉和追波上找到了可以借鉴的作品。

    这些“规则”就是从那十个小时里学到的。

    给菜鸟的良言:如果你在UI设计上不够好,那是因为你更善于分析,而不是在美和平衡上没有天赋。

    这篇文章不是理论,而是实践。这里没有黄金分割,也没有配色宝典,只有我的一些经验教训和一直以来的练习。

    举例来说,柔道因为日本尚武的传统思想一直延续到现在??墒茄叭岬赖氖焙?,除了演练,你也会听到关于力量、流派以及和睦这类的东西。

    上个世纪三十年代,在(前)捷克斯洛伐克,一些同纳粹斗争的犹太人发明了近身格斗术。在这种不优雅的格斗术课上,你会学到如何用一支钢笔或者一本书来刺瞎敌人的眼睛。

    UI是显示屏上的近身格斗术。

    下面来介绍设计优雅UI的几条准则:

    1.让光影自然

    2.层次优先

    3.充分留白

    4.学习图文堆叠

    5.使用多种文本样式

    6.选择适合的字体

    7.像艺术家一样寻找灵感

    第一条:让光影自然

    阴影是最自然的暗示,它可以突出我们想让用户注意到的界面元素。

    “让光影自然”——这可能是学习UI设计最重要却最容易忽视的准则。因为光总是天上射下来,所以一旦它反着从下而上,我们就会觉得非常别扭。

    当光从天空中射下来,会照亮最上面的事物,并且向下投射出它们的影子。所以顶部最亮,而底部最暗。

    你平常不会看到下眼睑阴影很重的人,所以如果有人在脸的下方打光,然后站在你的门前,你肯定会被吓个半死。

    没错,这对UI来说也是一样。在用户界面中,所有的元素都有阴影和所有的元素都没有阴影效果其实是一样的。我们的屏幕是二维的,但是我们给元素加入了很多效果,让它们看起来像是三维的。

    我最喜欢这个按钮被圈出来的右下方的部分:

    拿按钮来说,就算是这种扁平化的按钮也会有一些光影细节。

    1.没有按下去的按钮(第一个),底边有深色的投影。

    2.第一个按钮会有一个从上到下,从浅到深的渐变,这是因为它在模仿微凸的效果。就像你照镜子的时候会把镜子稍稍倾斜来采光,按钮也是如此,表面的微凸会增加光泽质感。

    3.第一个按钮的投影非常精致,放大看会更明显。

    4.按下状态的按钮虽然仍旧有从上到下,从浅到深的渐变,但是整体明度较低。这是因为光一般很难到达向下凹陷的面。在现实生活中也是如此,因为我们在按下按钮时手会挡住光。

    这仅仅是一个按钮,但是仍然会有四种光的微效果。我们可以通过下面这个例子来了解一下。

    虽然iOS6的风格已经有点过时了,但是它在光的质感表现方面做的非常好。

    这是一对iOS6的设置按钮——“请勿打扰”和“通知”。你是不是觉得这没什么特别的?那我们现在来看看这两个按钮上有多少光影效果吧。

    “请勿打扰”所在的控制面板有微弱的投影。 “ON”的滑块轨道有微凹感。 “ON”的滑块轨道的凹面的底部有反光。图标是微微向外突出的,有看到他们上边的高光吗?他们的光是从上方垂直投射下来的,所以你可以看到很大块的高光。 离边角越远,光的层次越丰富,反之则越单一。

    是一个分界线的细节图,来自于我很早以前的“Hubster”概念。

    有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

    相关文章

    相关热点

    查看更多
    ?
  • 中央组织部划拨中管党费用于纪念建党95周年走访慰问老党员和生活困难党员 2020-02-19
  • 转方式调结构显现阶段性成果(读数·发现经济运行的轨迹) 2020-02-19
  • 越冷越嗨!跟着彼得潘去无人岛冒险吧!早鸟票抢先购彼得潘 2020-02-15
  • 人民日报:70年正青春,不停步向未来 2020-02-15
  • 《扶摇》撞档世界杯 战将杨幂女子力燃情五洲 2020-02-12
  • 高校招生章程看不出重点? 专家为你解读其中关键词 2020-02-12
  • 内蒙古打掉涉黑涉恶组织团伙348个 2020-02-04
  • 台媒曝吴建豪离婚 百亿身家娇妻收两封离婚协议书 2020-02-04
  • 火箭军官兵牢记强军目标 建设世界一流战略军种 2020-01-29
  • 河北阜城:“粽情飘香”敬老院 2020-01-27
  • 工信部:鼓励婴幼儿配方乳企质量安全追溯体系建设 2020-01-20
  • 公然侮辱救火牺牲消防战士 一网民被拘15日罚款1000元 2020-01-09
  • 河南省委省直机关工委召开br“学习弘扬焦裕禄同志的‘三股劲’加强机关作风建设”座谈会 2020-01-09
  • 洞庭湖3万亩“私家湖泊”事件续:当地拆除矮围7200米 当事人被刑拘合同将解除 2020-01-05
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2020-01-05
  • 免费制作赚钱游戏软件 时时彩三星组选视频 体彩大乐透走势图后区 斯诺克台球单人版 捷报网球比分网 巴渝麻将川渝麻将 学生暑假在家赚钱方法 今日山西快乐10分走势 上证指数000001新浪财经网查询 青海11选5一定牛