浅谈网页配色与布局细节的搭配

        配色
        其实对色彩的感觉是设计师应具备的最基本素质,其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论,什么冷暖色、对比色/补色、色彩心理、搭配原则等等,满大街都是,有意者随便搜一两篇看看就行。色彩对于美工设计师来说,更重要的是一种感觉,就像打篮球投篮的手感一样,多看,多练,这种感觉是可以后天练出来的。Mars刚接触设计时,连坐公交车时也会注意路边某公司、饭店的招牌是如何配色,处处留意生活中色彩搭配的美,关于色彩截图就更记不清有多少张了。
        初级阶段:用自己首映感觉******的1-2种颜色,不考虑其他因素、他人感觉;
        过度阶段:开始感觉一两种颜色单调,尽量多尝试不同色彩,该阶段极容易出现没目的的乱搭现象;
        成熟阶段:该阶段了解了大众对色彩的审美,开始理性的用1-2种色系搭配,能体会到同种颜色不同色值的细微差别,大多设计师都在这个阶段;
        ******阶段:把一种色彩用至******,甚至只用黑白灰,******沉浸某种颜色,甚至有点变态,但其创作效果让处于第三阶段的设计师一看就是大师所为。
        布局
        美工设计师除了对色彩要有好的感觉外,对布局也要有很好的把握,组合的好坏直接影响作品的效果。其实做好布局设计也不是很难,无非就以下几步:
        布局准备:明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。
        布局版式:关于布局的版式多种多样,在将重点内容放在最显眼的前提下,可自由选择版式。对于网页来讲,根据大多数人从上到下、从左到右的浏览顺序来考虑,应该将最主要的内容、图片等放在页面的左边和上边。
        精细布局:整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。
        Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说,如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的布局做好了,其他网页、宣传册等平面布局应该都信手捏来。
        细节
        至理名言“细节决定成败”,在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略,但对设计师来说绝不可放过,比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话,只有你看得多了,比较得多了,才能看得出这些细节。有人觉得这些细节没有什么大碍,但多个细节组合在一起就和让人觉得不舒服。
        一般正常审美的人肯定觉得下面的好看,但却不知好在哪?听Mars从各个角度详解一下:
        配色:字体颜色像是直接从32色板上取的,没经过考究;表单边框色太重;表单背景与页面背景相同,没突出层次。
        布局版式:此组件又没有多行操作,无需使用列表形式;上图保存按钮在该组件标题之上俨然不合理;组件的标题的位置大小不够醒目。
        用户体验:明确这是一个系统里的界面组件,所以这个人既然都登进来了,还用填记录人吗?时间也肯定就是提交时间啊;提交人主要是提交自己的批注,所以给他提供大片的提交内容的输入框即可,简单明了;提交按钮,上图需要再填完批注内容后折回到左上角“保存”显然不合理,下图的界面大大方方右手边一个按钮,看起来明显,操作起来舒服。