首页 > 教程 > 关键词 > UI设计最新资讯 > 正文

UI设计的7条“规则”【一】

2014-12-03 11:39 · 稿源:ui.cn

介绍

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

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

用户体验设计师:想让自己的作品比大师级PPT更加美观。或者是已经发现热销产品的界面和体验总是完美结合的设计师。

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

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

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

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

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

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

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

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

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

举例来说,柔道因为日本尚武的传统思想一直延续到现在。可是学习柔道的时候,除了演练,你也会听到关于力量、流派以及和睦这类的东西。

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

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

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

1.让光影自然

2.层次优先

3.充分留白

4.学习图文堆叠

5.使用多种文本样式

6.选择适合的字体

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

第一条:让光影自然

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

网友热搜:

  • 相关推荐
  • 大家在看
  • i云保放大招“稳就业” 保险营销扁平化是关键

    保险行业“开门红”因疫情遭受重创后,目前已有序进入复工复产期。同时,来自各平台的保险人才招聘需求日渐旺,据不完全统计,截至目前已有多个保险业垂直平台积极发布数十家保险公司的人才招聘信息,招聘岗位多达1600多个,几乎涵盖集团各部门及旗下各类公司的各级机构,大有雨后春笋之势。与此相对的是,保险科技服务平台i云保积极响应中央“稳就业”的号召,凭借扁平化的组织架构、科技赋能从业者,使得平台保险代理人脱落率下?

  • iOS 14、iPadOS新细节曝光:重新设计UI、优化手写功能

    明天凌晨开幕的WWDC开发者大会,iOS 14等一大波儿新系统可能并不是苹果的重点,而真正的是主角是基于ARM自研Mac处理器。据最新消息称,即便重点不在新系统上,但苹果依然为iOS 14准备了不少新

  • 设计实战 赞扬设计服务带你探究LOGO设计

    我们都知道,每个公司都有着它自己的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师们才能基于它们来为这些公司企业进行LOGO设计。LOGO绝对是最能够直观的体现一个公司属性和风格的东西之一。专门设计一个独立的、与众不同的LOGO是一件很艰难的事,因为就目前市场上存在的公司企业和五花八门品牌LOGO实在是太多太多了。LOGO设计的独一无二,对公众而言,能够看一眼就能快速的想起某一?

  • 丐帮设计打造人人共享在线设计平台

    受疫情影响,互联网经济整体增速放缓,新的营销困境也随之而来。流量是企业的核心困境,而营销渠道是流量的新动能。丐帮设计率先打破了数字化营销的技术壁垒,通过强大的人工智能技术,研发出能随时满足用户需求的设计共享平台。人人都是设计师提到设计,我们会想到什么?是长城、金字塔那样的伟大建筑?是每年巴黎时装周的高定新款?还是埃舍尔的矛盾空间?是,却不止如此。工薪族如何做出精美被老板夸赞的PPT?自媒体人怎样作图?

  • 设计师的福音,超高颜值的ConceptD 3设计本

    对于众多设计师而言,一款专业的笔记本必不可少,但在笔记本市场上符合设计师需求,轻薄、性能、色彩与颜值都满足设计师群体的笔记本少之又少,如何选择选择一款适合创作的笔记本成了众多设计师们的难题。2019年,宏碁针对设计师群体推出了ConceptD系列设计本,在保持轻薄的同时拥有高性能,并为设计师们带来精准的屏幕色彩,提高创作效率,成为众多设计师的不二之选。并在今年618京东购物节之际,宏碁开启限时优惠,618期间购买Co

  • 设计好看就是可以为所欲为

    在汽车历史上有一款很神奇的车,它性能平平,做工粗糙,售价还很贵;它声名狼藉,恶评如潮,卖的也不好;它早早停产,却名留青史,成为一个象征未来的艺术符号。

  • 特斯拉正邀请中国设计师为其设计汽车 新车将面向全球销售

    【TechWeb】6月17日消息,据国外媒体报道,特斯拉正在为其小型版新电动汽车征集来自中国汽车设计师和业余设计师的设计方案。特斯拉是通过其官方微信发布的公告,邀请来自中国的汽车设计师和非汽车设计师为其新车提交设计。该公司将考虑中国设计师提交的设计方案,被选中的设计未来可能会在其上海超级工厂下线。外媒报道称,虽然这款车将在中国设计和生产,但特斯拉的目标是在全球销售。到目前为止,特斯拉及其CEO埃隆·马斯克都没

  • 特斯拉邀请中国设计师设计汽车!造“中国风”特斯拉

    随着特斯拉国产步伐的加快,特斯拉在中国市场变得越来越活跃。6月16日消息,据外媒报道,特斯拉正在邀请中国的专业汽车设计师和分专业设计师提交方案,制造出小型版新电动汽车。事实上,早在

  • OPPO主题设计大赛正式启动,招募优秀设计合伙人一起“绽放无边界”

    6 月 23 日,OPPO主题设计大赛正式开启招募。OPPO通过大赛招募优秀设计合伙人,共同探讨科技与艺术人文的智美融合,挖掘个性化主题设计与壁纸设计的艺术价值和商业价值,为OPPO用户打造独具一格的美学与交互体验。 OPPO主题设计大赛是由OPPO主办的一场设计美学盛会,旨在将“科技”与“艺术人文”的融合及畅想触达全球,让优秀设计师、插画师突破常规,施展创作灵感。本次大赛以“绽放无边界”为题,特邀知名插画师特浓TN、Lost7

  • 标准化、平台化、产品化….病理AI如何走完“最后一公里”?

    历时107天,阿里云天池主办的"数字人体"视觉挑战赛落幕收官,此次大赛以宫颈癌为切入口,旨在通过提供大规模经过专业医师标注的宫颈癌液基薄层细胞检测数据,让选手能够提出并综合运用目标检测、深度学习等方法对异常细胞进行定位以及对宫颈癌细胞学图片分类,提高模型检测的速度和精度,辅助医生进行诊断。英特尔是此次大赛联合主办方,其开创的英特尔深度学习加速技术,极大的提升了本次比赛的推断效率。大赛期间,来自12个国家和地区的近

  • 设计没灵感?使用免费的Billfish搭建个人灵感库试试

    设计师是一个“创意”至上的职业,很多设计公司的核心理念就是“无创意,不设计”,折射出的是设计师对创意,对创新的极致追求。然而,有很多设计师苦于自己的创意“贫乏”,在工作中苦苦的挣扎。我们经常在提倡创新,但其实内心最清楚,我们设计的很多作品只是在沿用以前的设计思维,特别是一些产量和产值为中心的设计公司。面对如此的市场环境,个人设计师如何快速的找到灵感,常用的方式便是借鉴于各大平台网站,久而久之很难形

  • 满足轻奢需求 一汽-大众CC设计清新又高档

    买车,舒适度是自己的,设计是给自己同时也是给别人看的,因为,人,都是有社会属性的,当然希望别人觉得你的选择有档次,又有品位,比如大众CC。优点:大众CC的 18 寸轮毂 245 的米其林轮胎,还有前后独立空调,全新触摸按键,真的没谁了。动力也是很不错的,只要敢给油,就有推背感,虽然不像美系车那么猛,但还是有的。油耗也很动人,买了车的第二天就开车去上班了,高速上居然开出了 4 点多的油耗。回头率真的超级高,比奥迪和

  • 我乐家居拯救糟糕睡眠的卧室设计,你不准备看看?

    你的睡眠被偷走了吗?如今,睡眠质量几乎成了一个社会性问题,防噪耳塞、枕边精油、蒸汽眼罩、褪黑素…………五花八门的新奇好物只为给人们一个安稳的睡眠体验。不过,这些方法虽然有效,但却治标不治本,想要拥有优质睡眠,还是得先从自家的卧室设计入手。今天,我乐家居就教你如何轻松get一间“高质量睡眠的卧室”。1、利用好色彩搭配研究证明,不太合适的卧室色彩设计往往会影响人们的睡眠质量;反之,好的卧室色彩设计则会平静

  • 哈弗大狗内饰首次曝光:从未见过的设计

    近日,有网友曝光了一张哈弗全新SUV——哈弗大狗的实车内饰图片。新车将基于哈弗全新平台打造,并由前路虎设计总监、现长城汽车全球设计总监兼副总裁菲尔·西蒙斯操刀设计。图

  • 苹果新iMac曝光:窄边框设计

    尽管从全行业来说已非主流,但苹果一直保留着iMac一体式电脑产品线。据国外爆料人消息,苹果可能会选择在今年6月22日举办的WWDC上推出新款iMac。首先是外形方面,iMac将参考iPad Pro的设计语

  • 全新宝马4系大鼻孔设计惊到网友!罗永浩表示“无语”

    和预想的一样,全新宝马4系发布后,其超大“鼻孔”设计引起了网友的热议,如今连罗永浩也加入了这场讨论。近日,网友@汽车营销分析在微博上曝光了一张全新宝马4系的实车图,不少网友

  • AEG开关插座-为高净值人群的安全倾心设计

    多年来,我一直在美国旧金山工作,从事室内装饰设计,为很多追求高品质的用户设计打造了他们喜欢的装修风格。对于德系高端品牌AEG,我最初了解到这个品牌,也是通过我的客户,有许多客户在我为他们设计装修风格时,都要求使用AEG的洗衣机、洗碗机、开关插座等,对于这个品牌我有了深刻的印象,之后去详细了解了这个品牌,确实如很多客户所说的那样,德系百年高端品牌,无论是家居电器系列,还是电气系列的产品,质感和品质都是屈指

  • 嘉兴锦川仕空间设计王晓东:背靠齐家网,走出新生代装企的数字化突围之路

    疫情给家装行业带来了明显的影响,市场消费停滞让众多传统装企陷入了“适者生存”的激烈竞争中。疫情期间市场变化的加速,也给了许多成立不久的新生代装企弯道超越老牌装企的机会。嘉兴锦川仕建筑装饰有限公司(以下简称“锦川仕空间设计”)作为一家新兴成立的装饰企业,在疫情期间接单量依旧保持平稳增长,成为齐家网平台上新兴装企中的佼佼者。在锦川仕空间设计创始人王晓东看来,疫情对装企而言是一场考验,能积极转型通过数字

  • 室内设计师的视频号逆袭之路

    ​我是一个室内设计师,做了 10 年的室内设计,有 6 年都是研究中式设计,在这里面投入大量精力和时间,客户很是认可。

  • 苏州凡伊乐品牌饭豆豆家居:让生活、设计与爱无限延伸

    给有限的生活以无限的张力,让生活、设计与爱无限延伸。有限的事儿是随时可以发生的:幸福的光阴不会无时无刻、蓬勃的生命力不会年复一年、天涯会在快乐的咫尺中缩短、童年的无忧无虑会在成长的烦恼中消失、一个设计作品的存在时空也不会永远......但是有限的瞬间也会产生永恒,从而无限延伸,我们的人生也会因为从有限中传递出来的某种无限让人无比眷恋。伟大的画家梵高就是在有限的生命时光里找到了自己永恒的绘画语言,他认为:“颜色

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议