很多初级网页设计师 , 在初入行时 , 往往会有一些细节上的东西做不好 , 导致整个画面看上去粗糙没品质 , 这些细节可能是很细微的 , 很容易被设计师不重视或直接忽略掉 , 当加起来有几条细节没有做好 , 你的作品的品质已经开始下降 , 所以要做好界面同时也要注重设计细节的处理 。
今天分享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上找到的网页设计布局——你觉得怎样?(提示: 注意对边边缘的对齐情况 。 )
左图 , 我突出显示了由于对齐问题带来的视觉流向 , 而在右侧 , 我只是将所有主要内容进行了左对齐 。
左图糟糕的对齐形式 , 右图是调整后的对齐形式(点开图片可以查看大图)
5.把握文字的大小和间距我们并不是为蚂蚁设计的 。 增大文字的尺寸和间距 , 能够使得内容更容易阅读和消化 。
6.使用合适的布局形式大多数App或者网站都会用到搜索 , 关于如果排布具体的搜索结果一直存在一些争议 。
如果结果的排序很重要 , 那么使用列表视图是最有效的 。
如果顺序无关紧要 , 而你希望你的应用是鼓励用户去发现(比如Pinterest) , 则使用网格视图更为合适 。
7.先用黑白设计 , 后面再加颜色使用黑白设计时 , 能更专注于解决和设计应用的核心体验 。
而如果在做布局框架的同时 , 加入颜色 , 会引起一些情感上的干扰 , 会打断我们专注于核心问题设计上的能力 。 (译者注:先做交互 , 后做视觉 , 现在应该大多数都是这么个流程吧 。 )
推荐阅读
- 浅谈网络推广营销对企业的4大好处 网络推广营销对企业的好处有哪些?
- 教你做网页项目设计的6个步骤 网页项目设计该怎么做?
- 介绍做网络推广的3大好处 做网络推广的好处有哪些?
- 浅析网站设计的16大趋势 网站设计的趋势有哪些?
- 分享网页设计的8个要点 网页设计的要点有哪些?
- 分享网站设计建设的3个技巧 网站设计建设的方法有哪些?
- 把握追女生的技巧 追女生不是事儿
- 地铁搭讪女生的方法有哪些
- 追女孩的3大忌 每个都能成为你的阻碍
- 什么样的男生容易被发好人卡