最近忙碌期稍稍过去了,于是想干点自己的事儿。
外带其实一直都对之前自己所使用的主题不太满意,虽然做过了一些基础的改动,但总觉得应该可以做的更好才对。

从技术上这里没什么好说的,也就是基本的css和js代码编写而已。
这里我更想说的是和设计相关的内容。
大致说说个人对设计(包括视觉和交互)方面知识的总结。
其中大部分内容就运用在了这次blog的改造当中。

那么,本智障码农主讲的基础网页设计课,start~ (≧▽≦)/



个人所崇尚的设计理念十分简单,一切以 焦点 为核心。
焦点 一词,在该文中的定义为 注意力 所在的地点,即会吸引用户眼球的tips。
人类的 注意力 始终是稀少的,甚至可以说是宝贵的。
那么对于网页设计来说, 最大、最重要 的目标,就是要引导用户,
自始至终将其宝贵的注意力 自然、舒适 的引导到用户想要的地方。

该文中还会常出现 内容物 这一关键字。
本文的定义中对于内容物的解释为:承载网页 功能所需 的所有按钮、链接、表单、文字等内容。



网页设计的基础要素

排版、色彩、交互。

个人认为这是一个网页设计所需的,最基础的架构。
其关系分别可以大致可以约等于前端代码中的html、css、js。
从这三方面按顺序入手,可快速的构建出最初版的完整网页设计稿。

1. 排版

排版,基本等价于前端代码中的html。

宏观来看,排版决定了一个页面的基本布局。
微观上说,排版也决定了一个页面内每个模块的基本结构。

常见的布局有居中布局,左右布局,三栏布局,流式布局几大类。

居中布局三栏布局 常见于门户网站、下载站等内容为主的页面。这类页面内容繁多,但每个内容权重值相当底下,因此居中和三栏,可以一口气将所有的内容直接放入整个视觉范围的最中心。用户在使用此类网页时,其焦点也不需要大量的左右移动,仅通过鼠标滚轮的滚动即可完成所有内容的浏览。

案例:119手游网 利益相关:该站boss请我吃过一顿饭……

左右布局 的站点多以工具类网站。该种类页面内容物从数量上来讲并不算多,但是其内容物的重复使用量十分巨大。需要将其内容物尽可能展现在一个屏幕,高频率内容物单独提出。充分的利用现今的宽屏显示器的所有区域,把焦点按使用频率和内容物大小左右分割。消除部分、甚至是所有的滚动条力求交互上的简化。

案例: 简书

流式布局 所用站点相对较少,其全称为 瀑布流式布局 。最早进入大众眼球貌似是出现在 Pinterest 中。如其名,布局方式为将内容物分割为多个大小、形状相似的区块,如同瀑布一样,不断的在dom流中向下添加。多见于图片、信息资源、导购等网站。其内容物特性大致为:多且内容相近、权重指偏差较小。通过无缝加载,力求以最小、最自然的交互去展现最多的内容。

案例: pinterest

以上为几种布局的基本特点,但是设计无绝对。有时跳出思维惯性做出来的东西反倒会有出乎预料的效果。各个布局方式也可尝试相互组合借鉴。例如 Zine (利益相关:前员工) 的web版,作为工具类应用却使用了居中布局的方式。更加凸显其精致细腻的格调。

也可以跳出框架,来做一些自定义的布局。
2年前个人设计的ZZZero 2.0所使用的,其布局方式就是居中和等比分割的混合布局。
(图片暂缺,找到后补_(:з」∠)_)

除了布局外排版还决定了内部的基本结构,这部分比较自由,总体来说只有两大原则。

  1. 规范
    即内容的排版必须规整有序,而且连续无间断。这是为了保证用户的焦点能够顺着布局自然转移不突兀。

  2. 松弛
    即区块与区块,内容与内容,行与行,字与字,万物之间,必须要有合适的间距或空白。这一点是为了保证用户的注意力能够舒适且完好的锁定在焦点之上,不会受到周边元素的干扰。至于空白怎么留,照规范的原则就好。

2. 色彩

根据工作几年身边同事的反馈,色彩可能是大部分人觉得最为头疼的问题。

其实色彩本身不复杂,至少对于做出一个 简单好看 的页面这一基本目标,很简单。
就个人感觉。大多数普通人,觉得色彩难以把控最大的原因在于:他们拥有的颜色 太多 了。
很多人在做配色的时候,一大堆颜色往上一填,毫无节制。就好像要钉个钉子,却把兵器谱里八百般神兵利器全拿了出来。没一个是用对了的。

用色的时候,先定下一个 主色 。这个主色十分重要,与你想要表达的内容、气质、格调息息相关。确定好一个、且只有一个能好好表达网页主题的颜色出来。并且要注意,该主题色十分大的概率可能需要 大比例使用 的颜色。除非老手刻意如此,否则在决定该色彩的时候一定要确认好该颜色大比例使用后是否会产生负面效果。

没有任何设计和美术相关经验的人,可以先把色彩的工作到此为止,设计完成后如果觉得颜色过于单调再添加。

主色设定好了后,还可以分别设定一个 高亮色阴暗色 。二者都和主色相关,高亮色明度比主色高,阴暗色明度比主色低。至于三色是否足够和谐,随便开个画板涂3个色块就知道了。

对于大部分人来说,你已经拿到了3个神兵利器,足够了。再多下去,颜色就会变得难以把握,极易失控,最后只会把你的设计稿毁得一团糟。

有经验的人可以在主色比较清淡,或者以黑白为主、色彩比例不大的情况下再加入1-3种辅助色。

用的色彩越多,其把控的难度也就越大。

用色之道在于均衡,在于克制。

3. 交互

最早的网页只是单纯的仿照纸质排版,让后将其放置于屏幕。
这时候的网页是没有什么交互的,即便有,也只是几个链接,几个按钮罢了。
但是现如今的网页,其设计思路完全可以参照pc和移动端的各种应用的思路来做。

交互上的具体理论,我依旧说不出什么东西来。硬要说,也只是一种直觉。
电脑和手机存在了这么久,很多的用户习惯已经养成,除此之外还有生活中数十年数百年数千年的生活习惯,这些东西大部分甚至已形成了一种 肌肉记忆条件反射 。如何将这些肌肉记忆和条件反射最大程度的挖掘出来,将产品、肉体、精神三方无缝对接,这是现阶段我认为交互的精髓所在。

交互更多像是一种buff似的东西。其可以存在于设计的每个缝隙中,改善设计中的每个细节,并使产品的设计得以产生质的提升。



三大基础做好,一份合格的设计稿其实基本算完工了。剩下的就是细节上的打磨,在打好的框架之下狂奔吧 (≧▽≦)/

该文仅限于pc网页设计,移动端略有不同。但是设计相通的地方很多,一旦对某个细分领域的设计熟悉了,其他领域的设计也可融会贯通。