相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

APP设计中的四大要素详解

火枪手发布于:2019-2-26 15:42 |原作者: 阿鑫DS|
火枪手
广东省 汕头市 网页设计师
发私信 + 关注
简介: 入行三年以来,第一次写一些东西。算是对三年来所积累的知识点做一个总结。

很多设计师往往忽视了总结的重要性。总结能对你的设计产出作出阶段性的反思,思考的过程你会发现一些不足和更加完善的解决方法。会形成自己的一套方法论,让设计有迹可循。俗话说温故而知新,在巩固所 ...


移动设计中的8px栅格

8px栅格就是界面设计中的所有元素和间距,都要遵循8或者8的倍数。为什么是8的倍数呢,因为8针对移动端设计更有优势,可以缩成1倍图,而没有虚边,移动端主流尺寸都是8的倍数。除此之外,我们在做其它设计时也可以将不同的留白设计成有倍数关系的数字,比如10px、20px、30px等,让设计内部更有逻辑性。如图(2-2):

APP设计中的四大要素详解 飞特网 设计理论

图(2-2)

2.2对比原则

对比原则应用广泛,可运用于各个设计中,如网页设计、平面设计等。对比可以让画面层次感更加丰富。在移动设计中,使用对比手法,可以突出主体信息,弱化次要信息,让界面视觉有强有弱更有节奏感。可以很好的引导用户使用产品,从而提升用户体验。

颜色对比

界面设计中的颜色对比,多用于产品标签或交互按钮上如图美团卡片推荐(2-3)促销信息、评分还有商家属性的标签都做了不同颜色的区分。促销信息用了红色刺激购买欲外卖标签用了美团外卖的产品色黄色,更具有品牌标识。并与促销信息区分开来。

APP设计中的四大要素详解 飞特网 设计理论

图(2-3)

文字对比

界面设计中文字排版影响整个界面的呼吸节奏感,文字对比尤其重要。产品中的列表、卡片各个模块都会运用到文字的对比。文字对比主要从三个维度进行对比:大小、粗细、颜色。如图知乎(2-4)信息流卡片的文字用了三个信息层级。标题>正文>评论点赞。通过字体的大小、粗细、颜色对比,让信息层级清晰可见。

APP设计中的四大要素详解 飞特网 设计理论

图(2-4)

2.3亲密原则

根据信息关联性来排版。信息关联大,则间距小,信息关联小,则间距大。帮助用户能够快速获得信息。使阅读起来更加清晰明了。

豆瓣内容推荐如图(2-5)卡片信息,主要分为三个层级:用户信息区、内容区、点赞评论区。所以这三个区域之间的间距是最大的,都是统一的30px,内容区依次是标题、文案和图片,关联性强于三大区,所以间距用了24px;然后用户信息区的头像和用户名信息关联较大,所以用了16px间距。三张图片关联性是最大的,所以用了8px最小间距。

APP设计中的四大要素详解 飞特网 设计理论

图(2-5)

2.4重复相似原则

如果相同的内容(如标题等)属于同一个逻辑,可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。这就是重复原则。重复中又有变化,如果一味的重复,会让人枯燥无味,产生疲劳感,多样的变化突破了版面的单调、死板。这就是相似原则。如图今日头条瀑布流(2-6)在保证了统一的排版样式的同时,图片排版做了一些变化,丰富了界面的视觉。

APP设计中的四大要素详解 飞特网 设计理论

图(2-6)

2.5简单原则

从ios11开始,app设计趋势越来越遵循简单原则,大而简的设计语言。去掉不必要的视觉元素,减少干扰。做减法,用留白去塑造简单。用户喜欢看规整的界面,而不是毫无规则的界面。

字体规则简单

字号不宜使用过多。一个卡片信息,保持在三种以内字号,即大中小。相差值在4-6px左右。

分割线原则

很多产品开始去线化设计了,以达到简洁清晰的视觉效果。尽量使用留白分割模块,如果要使用分割线,分割线要淡。

产品去线框化

许多app的产品从最开始的边框设计,到现在越来越多的用浅灰背景来代替,去除线框的视觉复杂冗沉,灰色色块更加简洁。

排版规则简单

在处理排版的时候,各个元素之间的间距组合不宜过多。一般3-4种组合即可。过多会导致界面比较散、零碎。没有主次之分。如图爱彼迎(2-7)充分利用了简单原则,字体间距各个元素都遵循简单原则。

APP设计中的四大要素详解 飞特网 设计理论

图(2-7)

app设计中的板式设计还有很多深究的地方,如视觉层次、阅读节奏感等。由于篇幅有限就不再一一叙述。上面讲到的是比较基础,但又非常实用的要点,在工作中完全够用。下面进入app设计的第三个要素:

3.色彩其实很简单

讲色彩之前,我们必须要掌握色彩的一些基本知识。如色彩属性:蓝色代表安全、黄色代表活泼、红色代表热情等。色彩的构成:色相、饱和度、明度,要清楚三者之间的关系。色环上的一些色彩变化:如类似色、近似色、中差色、对比色等。由于篇幅有限,不对这一部分进行讲解。大家可以自行下去查阅资料学习。

3.1色彩运用

一个产品的色彩构成一般以主色、辅助色和点缀色构成。用色比例为主色60%,辅助色30%,点缀色10%。主色一般用在主要按钮交互,和导航栏和个人中心背景。辅助色起到调和作用,丰富视觉,在一些按钮上面和主色形成区分。点缀色用得很少,多用在一些小按钮或者标签、角标,结合运营设计去使用。用来点缀界面。


25

好评
20

差评

刚表态过的朋友 (45 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

火枪手
广东省 汕头市 网页设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计