如何快速提升设计感

导语 | 好的设计原则是能被所有人掌握并运用的。本文列出了一些目前应用广泛又比较基础的设计实战窍门,掌握它们之后或许你能让你的设计朋友刮目相看呢!

如果你不相信你也可以学习设计,那么请回顾一下我们的朋友——传奇的David Eric Grohl对学习新事物的看法:

我从来没有专门接受过鼓的培训,也没有专门上过吉他课。我都是自己琢磨,想办法搞明白它。如果你对一件事拥有绝对的热情,加上你的驱动力和专注力,你可以做到任何你想做的事情。

*译者注:David Eric Grohl曾是美国著名朋克乐队Nirvana的鼓手,目前是Foo Fighters 的主唱兼吉他手

温习David Eric Grohl的话之后,你应该对这次“速成班”充满信心吧!以下列出的设计实战窍门的排列顺序并无实际含义,请按需查阅。

1.使用明显的对比

为了避免给用户造成视觉疲劳,背景和字体的颜色应该区分得足够明显。通常,黑色字体和白色背景搭配是最容易阅读的。尽可能避免使用亮灰、亮黄、亮绿色。当你阅读时需要眯着眼看,那这个设计肯定是有问题的。

图片来源

2.接近纯黑比纯黑更容易阅读

如果可以,给字体赋颜色时尝试用#333333(51,51,51)代替#000000(0,0,0)。纯黑色在白色背景上晃眼,让人难以聚焦在目标文字上。

3. 核心内容优先

将核心内容布局在最重要的位置,向用户明确你的App或网站的主要功能。核心内容应该是全展示的,不能要求用户放大、滚动或者点击之后才能看全、看清。

图片来源

下面让我们欣赏一些视觉层级处理较好的案例:

Instagram(下图1)将图片/视频放在最显眼的地方以便用户发现。

Pinterest(下图2)将搜索框钉在页面顶部,不随内容的滚动而滚动,以此建立搜索优先的视觉层级。Pinterest有意将搜索框作为页面内的第一优先级元素。用户在pinterest上发现和浏览,此时搜索是的App的核心功能。

Spotify(下图3)明确的将专辑封面和歌曲名称放在第一视觉层级而播放控制其次。而在播放控制中,播放/暂停按钮的比重又大于上一首/下一首。

Facebook(下图4)和instagram看起来很相似,他们把用户的发表的照片放置在页面的中心,视觉层级的最前端。

4. 所有元素有序对齐

确保开启对齐开关可以最快速地让错乱无序的元素稳定下来。当设计师跟你说需要“网格”的时候,其实是在吐槽你的页面中有元素没有对齐。要提升我们的App或网站视觉效果,最简单的方式就是保证元素的对齐,它能让我们App或网站瞬间好看10倍。

图片来源

让我们再看另一个对齐的案例,这次我们选择medium.com。

我们首先看这张图:

这是我从medium.com截图后做过调整的图。看起来是不是布局混乱,摸不清层级?

再看下一张图:

注意看上下两张图的对齐边缘线,它们看起来如何?

我将上图的边缘线标记出来,看起来像弯曲的河流,下图我只是简单地将主要内容对齐

对比下面两张图的最终效果(图一对齐混乱,图二清晰有序)

图一

图二

5.合理的字体大小和行距

适当增加字体大小和间距可以提高内容的可读性。

合理的字号vs不合理的字号图片来源

6.如果顺序很重要,结果展示请用列表视图。

大部分手机App或网页会有各种样式的搜索,因此设计界可能也存在一些“如何在屏幕上展示结果”的良性探讨。如果前后顺序很重要,那列表是最有效的展示方式。如果顺序不是至关重要的影响因素,那么我们可以鼓励用户去探索(比如Pinterest和AirBnB),此时网格视图可以让用户在更聚焦的页面探索内容。

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

7.先设计黑白稿,再上色

黑白稿能让你更专注于App的核心体验过程。颜色带有强烈的情绪暗示,通常会干扰我们设计核心问题的注意力。(译者注:黑白稿更容易看出页面的视觉层级,以确认核心信息是否被重点展示)

8.给用户舒适的操作体验

看一下Luke Wroblewski的文章—— Responsive Navigation: Optimizing for Touch Across Devices中的一张插图,你会发现手部的负担真正成为一个问题。Luke列出了屏幕中较容易触及和使用的区域(右手用户为例)。当然,如果可以,我希望App能允许用户根据左撇子/右撇子设置对应的用户界面(译者注:smartisan可以做到)。很多高效的手机应用将导航栏和核心操作设置在屏幕底部三分之一的位置。

图片来源:Responsive Navigation: Optimizing for Touch Across Devices——Luke Wroblewski

9.借助调色板

配色是一门比较难掌握的艺术。我强烈推荐去Dribbble上搜索“color palettes”或者使用调色板生成器,如Coolors、Color Claim等,不要浪费时间在无休止的争论和猜测上了。

10.使用Apple和Google OS的规范

Apple和Google 为安卓和iOS应用的开发者创建了令人难以置信的资源。例如,Google Material spec提供设计指南、UI资源、配色、icon和组建来帮助开发者在设计App时赢在起跑线上;Apple的HIG——Human Interface Guideline可以回答你在设计iOS应用时想知道的一切问题。

截图自Google Material Design and The Apple Human Interface Guidelines

最后

永远记住——设计需要练习。

培养发现设计问题的眼睛需要时间和练习,但上述的窍门会很大程度上帮助你创造更好的设计。

翻译:Joker Huang

原文地址

原文发布于微信公众号 - 腾讯大讲堂(TX_DJT)

原文发表时间:2017-05-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏镁客网

发福利!越狱插件可以将iPhone6升级到6s

2054
来自专栏大数据钻研

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢...

3936
来自专栏司想君

2017年前端开发手册一-2016前端技术回顾

2017年前端开发手册公布了,从今天开始陆续为大家送上翻译文章。每日一篇,今天是第一篇,是作者对2016年前端圈的一次技术回顾。 PS:附上一首目前金曲榜第...

3355
来自专栏Renderbus云渲染农场

适合本科生的建筑渲染软件有哪些?软件各有什么特点?

基本主流的建筑辅助设计软件VRay都能很好支持,如:rhino,sketchup,Revit,及建筑可视化的3ds max,Unreal等。

2066
来自专栏无原型不设计

iOS界面设计,12个优秀案例激发你的灵感

总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design。作为设计师,尤...

3017
来自专栏无原型不设计

iPhone X的UI设计技巧

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 果粉们翘首以待的iPhone X终于开始预售了!同样满怀...

2914
来自专栏腾讯社交用户体验设计

你还在用轮播图吗

2003
来自专栏腾讯大讲堂的专栏

面向设计的半封装web组件开发

作者:张鑫旭,资深钓鱼爱好者,然后平时喜欢研究与学习前端技术。 前言 本文内容可谓是对大脑认知的一场洗礼。我们平常提到组件,就会想到重用,各个项目都能使用。而...

28610
来自专栏网络

终于,小编我边哭边写,把web前端从入门到精通的路线写出来了

一、前端开发入门 在入门阶段,你首先要学会最基本的技能:根据UI的设计稿,实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技...

2449
来自专栏知晓程序

懒得打字?这两款文字识别小程序,解放你的双手

在平时的工作和学习生活中,一旦碰到一些需要拷贝下来的图片上的文字,通常你会怎么做呢?

4022

扫码关注云+社区

领取腾讯云代金券