当前位置: 东方母婴网 >资讯 > 文章

强悍的纽约设计师妹子教你App设计四大原则

2018-04-09 01:06:49  阅读:8448+ 来源:本站原创 作者:海清

设计最有趣的地方在于它的通用性,不论是音乐、建筑还是工业,设计的规则大同小异。今天这篇文章来自纽约的产品设计师妹子Melissa,她从建筑系毕业之后并未从事她的本职工作,2014年11月学习了两个半月的网页设计之后开始转战产品和UI设计了,目前供职于Percolate。不要小瞧她的设计素养,建筑系的系统学习赋予她对于广泛意义上的设计更深入的认知,这篇文章就是这半年多来的一个阶段性答卷。

这篇文章总结了从建筑到产品UI的四个设计的基本原则。

一、轴

轴在UI设计中是最基本、最常见的概念,也是用来组织界面结构的重要核心。简单说来,轴是在设计的时候组织一系列元素的假象线,在下面的设计图中,轴以虚线的方式被标注出来。

1、对齐

轴最常见于对称元素的使用,当元素被布置成轴对称的布局的时候,会给人有序感。就像生活中绝大多数的事情一样,我们更倾向于享受有序的的东西,它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes 程序中的专辑列表的设计,所有的专辑列表在界面的左侧保持对齐,围绕虚线轴轴对称。

2、强化

虽然轴是一条假想的线,但是如果周围的元素的边缘控制得足够整齐,这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴,如果一边有建筑一边没有,那么这种轴线的感觉不会那么强烈。

从产品设计的角度上来看,Twitter 的时间线设计就是一个很好的案例,左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。

3、运动

当我们碰到某先线条的时候,视觉会很自然地沿着这些方向运动,就如同我们站在街上,会自觉地沿着街道的两头走动。两个端点决定了线,界定了开始和结束的地方,线,或者说轴线的存在会引导和提示运动的方向。

SoundCloud中,音轨沿着一条既定的水平轴线运动,随着音乐的播放,音轨自然地自左向右匀速运动。

4、连续性

如果终点是不确定的,那么你通常会沿着轴线的方向浏览/运动,直到你找到感兴趣的东西,或者感到厌倦并关闭应用。在建筑学中,未清楚界定的终点非常少见,因为建筑的修建通常没法永远持续下去,但是UI设计则不一样,无限地滚动下去是无比受欢迎的设计手法。

Pinterest的APP中就是这样做的,持续不断的图片沿着中轴线的方向持续不断地滚动下去,只要你有兴趣一直观看下去。

二、对称

当元素被均匀地放置在轴线的两侧之时,他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时,它们就形成了完美对称。

1、平衡

对称令整个设计更加平衡。当元素与控件在轴线两侧处于相同位置之时,会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候,如果左右两侧都是5间大小一致的房子,当你走在街上的时候这种平衡的设计会令人非常舒适,这是平衡给人的感受。

Rdio的APP设计就遵循着这样的设计规则,屏幕两侧的控件是相同的规格,这类布局很适宜阅读,用户会自觉地自上到下,从左向右查看。

2、不对称

如果轴线两侧的控件布置不再是一一对应尺寸相近,那就是不对称的设计。不对称的设计会给人明显的失衡感,可能会令人不舒服,但是也能造就残缺美,当然这要看你具体怎么做。

虽然Pinteret 的APP设计在整体上是沿着中轴线对称的(宽度一致),但是两边的界面控件并非是对称的,它们的高度并不一致,位置也是错落的。稍微一点的落差都会被眼睛捕捉到,而这样的差异让用户无法准确地左右顺序阅读。不对称设计打破了设计的平衡性和舒适性,但是也可以缓解了规律性设计带来的视觉疲劳。

三、层级

当某个元素出现在比其他元素更重要的位置的时候,层级就出现了。

1、尺寸

如果一个设计元素在尺寸上比其他的控件更大,就会区分出层级。毫无疑问,我们查看某个设计的时候,通常会被最大的元素吸引到。如果一个建筑物有5个出窗户,其中一个是其他四个的两倍大,我们的注意力自然而然会被吸引过去。

通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket。顶部的轮播文章拥有更大的图片,它的位置和尺寸会令我们一眼注意到。

2、形状

如果一个控件在形状和形态上同其他的不一样,也可以让它独立出一个层级。不规则的设计同样会令人侧目。建筑物的正面拥有五个相同的窗户和一闪大门,你会立刻注意到门的独特之处。

在Instagram的个人信息页中,圆形的个人头像在方形的图片中别具一格,非常抓人眼球。它会让人意识到,这个独特的东西,更为重要。

3、位置

位置的存在同样能彰显层级的不一样。在圆圈之内,中心位置的东西比边缘部分的看起来更重要。位于轴线顶端的控件会显得比其他部分的优先级更高。

以设计应用Path的设计为例,时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要,而这个地方正好展示的也是用户头像。

四、韵律

UI设计和建筑设计同样有着韵律之美,重复的模式会营造出独特的节奏之美。

1、模式

理解韵律最直接的方式就是听歌。音乐拥有节奏感,绝大多数的音乐遵循着相同的节拍,节拍就是音乐模式的一部分。

这方面最典型的APP是Airbnb,APP列表中每一间房子都占据一个模块,模块中有着大小相同的图片,价格、位置和房东信息和图片的相对位置一定,且排版匀称舒服,两个模块之间的间距也相同,当你浏览的时候,熟悉的节奏会让你清楚地知道上哪看关键信息。

2、间断

当节奏被间隔打断的时候,会形成不同的层级。听歌的时候,均匀的节奏被其他的音乐元素打断的时候,你会意识到这是比较特别的部分。

在Twitter的APP中,推文和推文保持着相同的样式,均匀的节奏,但是其中的“推荐用户”一项有着不同的样式,它插入到推文列表中,打破了整个信息流的节奏,凸显出不同的层级,会很快抓住你的注意力。

“如果发现本网站发布的资讯影响到您的版权,可以联系本站!同时欢迎来本站投稿!

点击排行
睿宝儿科联合富士instax教育:守护儿童健康,共创美好回忆
睿宝儿科联合富士instax教育:守护儿童健康,共创美好回忆

所有家长都希望自己的孩子能够健康快乐的成...

富士instax教育联手三野石孕童摄影,为准妈妈送上“爱的体验”
富士instax教育联手三野石孕童摄影,为准妈妈送上“爱的体验”

摄影的意义在于它能留住生命中美好的瞬间。...

孩子早产脑子发育不良的后果早产儿如何护理
孩子早产脑子发育不良的后果早产儿如何护理

一、早产儿脑部发育不良的并发症  1.心血...

Kipling官宣品牌大使Selina任家萱 携手乐活女神——“轻轻我行,即兴乐活”
Kipling官宣品牌大使Selina任家萱 携手乐活女神——“轻轻我行,

明媚而崭新的春日与3.8女神节共同来临之际...

新生儿水中毒了怎么办怎么给宝宝科学的喂水
新生儿水中毒了怎么办怎么给宝宝科学的喂水

一、婴儿水中毒的症状有哪些  要知道对于...

青紫型新生儿的原因解析新生儿皮肤青紫的6大原因
青紫型新生儿的原因解析新生儿皮肤青紫的6大原因

一、新生儿皮肤青紫的原因  局部青紫  ...

儿童喉咙发炎引起呕吐的原因儿童喉咙发炎引起呕吐的
儿童喉咙发炎引起呕吐的原因儿童喉咙发炎引起呕吐的

  在日常生活之中,小孩子经常会出现喉咙...

16天新生儿黄疸值190高吗新生儿黄疸指数高的原因有哪些
16天新生儿黄疸值190高吗新生儿黄疸指数高的原因有哪些

一、正常新生儿黄疸值是多少  足月出生宝...

黄疸指数高的危害黄疸高怎么治疗
黄疸指数高的危害黄疸高怎么治疗

一、为什么黄疸会偏高  1、新生儿的体内...

小孩出麻疹症状小孩护理措施
小孩出麻疹症状小孩护理措施

  因为宝宝的身体比较弱,抵抗力还没有发...

新生儿脐炎首选抗生素九个步骤轻松护理宝宝的脐部
新生儿脐炎首选抗生素九个步骤轻松护理宝宝的脐部

一、新生儿脐炎首选抗生素  新生儿脐带发...

曼龙,用爱见证传承,一路陪伴成长
曼龙,用爱见证传承,一路陪伴成长

曼龙创始人:“做这个品牌的初衷,只是为了...