契机与开端

顿悟

自从和UED同学合作,基本每见一面都要diss我一回。说我的页面丑的触目惊心无法忍受。其实我自己来说是丝毫不以为意的,虚心接受并不为所动,反正中后台产品也不见客户,自用的页面能用就行呗。但其实被她改下来,页面的易用性和外观是有明显提升的。

前一段时间以推进前端页面风格统一为考核指标,找设计同学对了一下鲁班平台上积累的项目页面,半个月之后也就是昨天,设计同学找我说了一下几个类型页面设计时处理的tip,心里还是有些触动的:很多设计其实都是这么多年来软件和页面UI培养出来的用户习惯,只要顺着已有的套路来就行了。这一点之前听过的deepin的设计小姐姐分享过,当时不是很能切身感受到,现在真的有了些体悟,比如:分页器都是放在下面的,为啥我要放在上边。。

道理真的是很简单,可能我的顿悟就像别人翻了翻书一样稀松平常,同样的事情可能真得经历一下才能彻底明白。

契机

在我深刻的反思了一下自己对页面设计的歪曲理解之后,在知道烦人的设计同学马上就要调到别的团队之后,我有那么一点慌。。

果然凡事都要靠自己,我还是得自己学习一下设计。

关于怎么学的问题,我也去请教了一下她,得到的答案是你就看别人怎么办的就行了。我觉得很有道理。但是觉得这个答案还可以升级,之前我看设计书的时候,懵懵懂懂,好像书里说的有道理,看完又不知道该把那些设计原则用在哪里。所以这次我打算边看书边去找,哪些地方用到了这些原则,我以前写的页面里哪些没有遵循这些原则,应该能获得更多体悟。

过程

旁边的同事买了一本《写给大家看的设计书》,一直在吃灰,我觉得是时候让它实现一下书生价值了。
参照阿里云控制台的页面,看看用了哪些设计原则和方法
反思自己的页面,low的原因在哪

亲密性

原则

将相关的项组织在一起。空间位置的接近就意味着存在关联。

如果多个项相互之间存在很强的关联,他们将成为一个视觉单元,而不是孤立的元素。彼此相关的元素应该归为一组。

tips:注意阅读时视线是如何移动的,从哪开始,沿什么路径移动,在哪结束。

目的

  • 实现页面的组织性
  • 使空白更有条理

技巧

眯起眼睛,统计眼睛在页面上停顿的次数,如果超过3-5个, 应该考虑将有关联的项归并为一个视觉单元。

避免

  • 页面上存在太多孤立的元素
  • 在所有元素之间留下同样大小的空白
  • 如果元素彼此无关,不要强行建立关系
  • 不要因为有空白而干预元素的位置

对齐

原则

任何元素都不能在页面上随意安放,每一项都应当与页面上的某个内容存在某种视觉联系

如果页面上某些项是对齐的,那么会得到一个更加内聚的单元,即使它们彼此分离,视觉上会告诉读者他们是一个整体。

tips:为每个元素寻找对齐线,理清元素间的对齐关系。

目的

  • 增强页面元素间的联系
  • 使页面统一而富有条理

技巧

  • 尽量,尽量,尽量不要使用居中
  • 尽量只使用一种对齐方式
  • 组织页面中的空白,使空白不要显得凌乱无序
  • 找到一条明确的对齐线,坚持以它为标准
  • 如果有一个照片图片图表有一条明确的边,就让文字靠着这个边对齐

避免

  • 页面上出现好多种对齐
  • 避免使用居中对齐

重复

原则

设计的某些方面需要在整个作品中重复。

有重复的项不一定完全相同,是存在明确关联的紧密相关的对象。确保重复看起来像是有意为之而不是瞎搞出来的。

目的

视觉单元的重复会将页面中的各个部分连在一起,保证页面一致性。在彼此相关或从属某一类别的元素样式上使用重复,避免他们成为页面上孤立的单元。

技巧

使重复变得更明显(显眼的样式)
增加一部分单纯为了增加重复性而增加的元素或样式

避免

太多而没有重点的重复

对比

拿着我设计(实际上已经写出了demo)的发布系统,欠欠的跑去问设计小姐姐感觉怎么样,嗯,被批了一顿。并说我的页面看起来怪怪的,具体哪里怪,我也不知道。

原则

不同的元素之间有对比效果,达到吸引读者的作用。

如果两个项不完全相同,那就让他们截然不同。

目的

  • 吸引眼球
  • 组织信息
  • 清晰层级
  • 指引读者
  • 制造焦点

技巧

  • 字体对比
  • 线宽
  • 颜色
  • 形状
  • 大小
  • 空间
  • 对比一定要强烈!important。

避免

避免类似的项,要不同就完全不同,对比要极端,做事要头铁。

复习

亲密,对齐,重复,对比。挨个运用这四个原则考量页面设计。

  • 亲密性原则: 我这个元素放的地方能不能体现他们之间的关联。。

  • 对齐: 页面对齐的基线在哪里,哪些元素对齐了哪些没对齐,为啥没对齐。

  • 重复: 哪些元素是归为一类的,可不可以运用重复的原则突出他们。

  • 对比: 哪些元素不一样但是样式又太过接近,是不是可以增加对比度。

思路

锻炼视觉敏感性,识别出别人的设计中的思路和原则的运用
多做尝试,多挨批

颜色

色轮

首先我们有三原色。红黄蓝。

design1.png

他们两两结合。

design2.png

相邻的颜色再两两结合。

design3.png

so,we get a 色轮。它的指导意义在于:

补色

180°相对的颜色互为补色,比如红色和绿色,蓝紫色和橙黄色。补色啥意思呢,就是他俩加一起是黑的。咋用呢,就是互补的俩颜色一种作为主色,一种用来强调(造成对比效果。)

三色组

相隔120°的颜色,组合在一起就是一个三色组,比如,红黄蓝,紫红蓝绿橙黄。三色组的搭配令人感觉舒适。

类似色

相邻的两三个颜色,基色是一样的,因此是协调的,搭配明暗色调食用更佳。

饱和度

对上边的色轮增加一个饱和度维度。so we get a super 色轮。

design4.png

越往中心颜色越浅,深浅得当的颜色好像有个名字叫高级灰。不刺眼,柔和,庄重,缓和,无冲突,优点多多,居家设计必备。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

算法笔记:分治法 Previous
DDoS高防结构学习 Next