专栏名称: 优秀网页设计
优设网官方帐号,国内知名设计师学习平台。和大家一起来利用碎片时间学习设计和PS技术吧!
目录
相关文章推荐
交互设计学堂  ·  为什么我想不到这些设计亮点 ·  4 天前  
ZaomeDesign  ·  为什么女厕永远在排队? ·  4 天前  
国际家居  ·  精致奢华的豪宅,让人折服! ·  5 天前  
国际家居  ·  精致奢华的豪宅,让人折服! ·  5 天前  
ZaomeDesign  ·  好想把他们拼起来 ·  1 周前  
51好读  ›  专栏  ›  优秀网页设计

写给UI设计新手的五分钟建议

优秀网页设计  · 公众号  · 设计  · 2017-06-09 12:47

正文

如果你怀疑自己是否能学好设计,那么给你分享传奇人物David Eric Grohl的一句话:


我从未特意去学习过打鼓,也没上过吉他课程,自己慢慢摸索就学会了。如果你对某件事情报以最够的热情,并集中精力、坚持不懈地去做,那么你想做什么都能成功。

有了Grohls先生的鼓励,你准备好开始行动了吗?(小板凳摆好,开始听课啦~)

1. 使用大量对比

背景色和字体颜色不要相近,深浅对比要足够大,不然会造成视觉疲劳。通常来说白色背景配黑色字体是最清晰的,阅读性最好。不要使用浅绿、黄色和绿色。如果要眯着眼才能看清文字内容,那就知道这肯定是不对的。

来源: https://developer.apple.com/design/tips/

2. 字体不要纯黑色

使用色号 #333333 (RGB 51,51,51)的颜色代替纯黑色。白色背景上的纯黑色字体会让眼睛不适,而且很难让人集中精力去阅读文字。

3. 重要的内容放在前面

把重要的内容放在你的APP或者网站的首页,而且这些重要的内容要一眼就能看到的,不要放大、滚动或者点击才能看。

我们来分析一些优秀的视觉结构的例子。

Instagram(左下)以用户发布的图片视频内容为主。

Pinterest(右下)把搜索栏固定在页面顶部,下面则采用好看的网格结构来营造出视觉层次感。Pinterest非常注重搜索功能,因此把搜索栏放在了页面的首要位置。

搜索是Pinterest的核心功能,大家都用Pinterest来搜索浏览资源和素材。

我们再来看两个例子:

Spotify(左下)显然很注重专辑封面并且把歌名放在第一位置,其次才是播放按钮。尽管播放按钮在次要位置,但是相比快进和快退按钮来说,播放暂停键占了更大比例。

Facebook(右下)和Instagram很像,选择把朋友的评论放在最前面。

4. 所有内容注意对齐

如果页面看起来奇怪或者不对劲的时候,最快的解决方式是调整对齐。当设计师提到要使用“网格”时,他们是想提醒团队对齐错误的问题。

想要改进APP和网站外观,调整对齐是最容易的方式,而且能够立马好看10倍。(get高效技能点~能有效减少加班时间有木有)

来源: https://developer.apple.com/design/tips/

我们来看medium.com上的另一个例子:

这是我从medium上截图下来的一个网页排版——你看了之后感觉怎样?有没有哪里感觉不舒服?

提示:注意看页面的左边,发现问题了吗?下面左图中我把没对齐的地方用红线画出来了,右图中是我调整之后的,所有主要内容都左对齐了。


左边错误对齐,右边调整好的对齐

5. 文字大小和间距

“我们不是给蚂蚁做设计。” 适当增加字号和行距可以让文字阅读性更高。

正确和错误字号对比,来源: https://developer.apple.com/design/tips/
正确和错误间距对比,来源: https://developer.apple.com/design/tips/

6. 如果顺序很关键的话,使用列表视图显示搜索结果

大多数网站和手机APP都有搜索功能,关于怎样显示搜索结果有一些不同观点的设计讨论。

如果顺序是关键的话,列表视图是最有效的。如果顺序无所谓,想要鼓励用户自己去搜索的话(比如Pinterest和AirBnB),那么网格视图则可以有效支持这一点。

By C. Siu & B. Chaparro (How do Users View Search Results Presented in a Grid Layout? )

7. 先用黑白色稿设计,再考虑颜色

先采用黑白色设计,可以让你把注意力放在设计和解决APP的核心用户体验等功能,颜色会影响我们的情绪和反应,打断我们的专注力。


8. 创造人性化、舒适的用户体验

触屏手势是一个重要问题,下图来自Luke Wroblewski的优秀文章《响应式导航:优化设备触屏方式》。Luke画出了手机上容易操作的区域(适用于右手使用者)——我希望应用程序有一个设置,可以自如地将界面从右手操作切换成左手操作。很多好用的APP都把导航和核心功能放在手机底部三分之一的区域。

9. 借用色板生成工具

配色是较难把控和掌握的,可以去Dribble上搜索 “Color Palettes”或者使用色板生成工具如Coolors和Color Claim。给自己节省大量的纠结时间。(选择困难症者福音~偷偷告诉你这些工具还可以上传图片,一键生成图片配色)

10. 使用苹果和谷歌系统规范

苹果和谷歌为设计Android或iOS软件的人们提供了大量的资源。比如,谷歌规范里有指南、颜色、图标、组件等等帮助你开始APP设计。苹果有HIG—人机界面指南,里面给出了如何设计iOS 应用程序的所有知识。

来源:Google Material Design (https://material.io) and The Apple Human Interface Guidelines (https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/)

写在最后

记住,设计需要练习。

想要练就一眼就能发现设计问题的洞察力,这需要花费大量的时间和练习。要做出更好的设计,除了学会以上技巧之外,还有很长的路要走。

优设译文:懒丫头cherry
原文作者:Marc Hemeon
文章来源:Medium
封面设计: vivien bertin