作者:Marc Hemeon
译者: 彩云Sky,文章来源于彩云译设计
很多初级网页设计师,在初入行时,往往会有一些细节上的东西做不好,导致整个画面看上去粗糙没品质,这些细节可能是很细微的,很容易被设计师不重视或直接忽略掉,当加起来有几条细节没有做好,你的作品的品质已经开始下降,所以要做好界面同时也要注重设计细节的处理 。
今天分享10条实用的网页设计设计干货,里面提到很多关于网页设计相关的微细节,对于初入行的设计师都值得一看 。
文章插图
好的设计原则是可以很容易被大众学习和实践的 。本文将介绍一些设计技巧相关的基础知识,看完这些
说不定你今天就能用上!
文章插图
如果你不确定自己适不适合做设计,请记住大神Dave Grohl关于学习新事物的看法:
我从未学过打鼓,也从未上过吉他课,我只是想做就去做了 。我认为,如果你对某件事充满热情,有动力,有专注力,就能做好你想做的任何事 。记住Grohls先生的话,准备好开始今天的速成班了吗?系好安全带,老司机带你飞:
— Dave Grohl, Foo Fighters
1.对比度不能太小背景与内容之间的对比度应该足够适合阅读,以免引起眼睛疲劳 。通常,白色背景下的黑色文本是最容易读的,尽量不要用浅灰色,黄色和绿色的文字 。如果你自己做完设计稿,不得不眯着眼睛才能看清,那就肯定是有问题了 。
文章插图
2.深灰色比黑色要更容易阅读如果可以选择,推荐使用#333333 RGB(51,51,51)而不是纯黑色作为文字内容 。纯黑色配上白色背景会让眼睛产生视觉抖动,让文字难以聚焦 。
文章插图
3.核心内容要突出首页的布局尤为重要,应该要清楚的显示应用的主要功能 。核心内容应该是显而易见的,而不需要通过缩放,滚动或点击等操作才能知晓 。
文章插图
让我们一起来看看市面上把视觉层次结构做的比较好的例子吧 。
Instagram (下图中的左边) 核心功能是希望用户上传照片/视频;Pinterest (下图中的右边) 的核心功能是发现和搜索灵感图片,所以把搜索放在了顶部最显著的位置 。
文章插图
再看看另外2个案例
Spotify (下面的左图) 希望给音乐专辑更多的曝光,所以将播放页面中的专辑封面放到最大,将播放器控件放在第二重要位置;然后在第二重要的播放器控件中再进行重要级拆分,结合用户的实际需求频率,把播放和暂停放大,快进和快退缩小 。
Facebook (下面的右图) 看起来比较像Instagram,把朋友的内容放在了核心位置上,因为社交是Facebook的核心业务 。
文章插图
4.注意对齐所有元素当看到一个设计不舒服的时候,首先应该考虑到的就是对齐问题 。当设计师们在强调需要使用“网格”体系时,他们其实是在提醒团队注意对齐问题 。
(译者注:新手只要把对齐这个看似简单的问题做好,设计就能提升一个档次!很多新人会把设计元素故意调的歪七扭八,以此体现他们做了设计,我当年刚入门的时候也犯了这样的错误 。实际上,有规律的东西能形成美感,对齐不是一种禁锢,而是一种好的设计方式 。)
调整好对齐问题是可以对任何网页或应用设计最行之有效的优化设计手段之一,只要做好了,效果能立马好上10倍以上 。
文章插图
看看另一个对齐问题,这个是medium的一个页面 。
文章插图
这是我从Medium上找到的网页设计布局——你觉得怎样?(提示: 注意对边边缘的对齐情况 。)
左图,我突出显示了由于对齐问题带来的视觉流向,而在右侧,我只是将所有主要内容进行了左对齐 。
文章插图
推荐阅读
- 短视频干货:短视频运营四大误区
- 干货!一次让你弄懂房贷
- 十年护发心得,纯干货!
- 食用油有个“黄金搭配法”!卫健委给你10条“减油”建议
- Java干货丨限流常规设计和实例
- 感冒药、止咳药、腹泻药…怎么用更有效?10条提示送给您!
- 网页设计一般套用模板 还是自己设计好?
- 交通事故现场拍照技巧,全是干货!
- 防火墙主备切换案例分析,干货值得收藏
- 刚刚晋升管理层,却不知道如何管理?管理入门干货