移动设计指南!如何利用视觉元素有效传达信息?(完结篇) - 优设网 - UISDC

移动设计指南!如何利用视觉元素有效传达信息?(完结篇)

2015/01/15 9072评论区

wq20150115

编者按:移动端设计指南终结篇来咯,这个系列的教程由@网秦UEC 的蒋灿同学翻译,从移动的信息架构到界面交互,再到今天的视觉设计都有全面深入的解读,很值得新手以及初阶设计师学习哟。

前两篇回顾:

在Elaine McVicar移动端设计系列文章的最后一节中,我们将共同探索在移动应用中设计师应通过哪些视觉元素来有效传达讯息。

为了利用平台化的功能,历史上第一批移动网站不得不在很多方面做出“让步”,因此远达不到“佳作”的水平。而如今,功能更加完备的设备让我们有机会打造出更具视觉吸引力的设计,这些设计不仅能够刺激和吸引用户,更能够提高用户体验的实用性。不过,机会的出现同时也伴随着挑战。

《移动设计指南!如何理解移动信息架构?(一)》,我们共同探索了移动端在物理特性和规格方面有别于电脑的地方;我们使用移动设备的时间、地点和方式,以及使用移动设备时的行为方式及感觉。之后在《移动设计指南!界面交互方法与技巧超全总结(二)》,我们探讨了这些区别对于结构和功能的开发有着哪些影响。上面这两篇文章为优秀的手机和平板电脑设计提供了基石。下面,我们进入移动端设计研究的第3部分:探索视觉设计解决方案以及打造漂亮、好用的应用所需遵循的一些最佳实践。

首先我们来看如何针对移动设备的物理制约进行设计(包括各项最佳实践),然后聊聊讯息传递方面(也就是使用视觉设计支持移动网站和应用上的内容)的设计。

针对移动设备物理制约进行设计

手机和平板电脑的物理形式和触摸屏界面限定了其在使用方面的几项基本注意事项。对于电脑,用户可以在宽广的内容空间内任意滚动或通过鼠标悬浮查看细节信息,但移动用户所面对的空间则较为有限,因此必须采取不同的交互方式。要创造出直观的用户体验,我们就必须要牢记有关移动布局和移动交互的特定限制因素。

移动屏幕上有限的空间对内容和交互的有效呈现提出了一些有趣限制。具体来说就是:布局务求精简、专注。

布局结构

为了给设计提供强有力的基础,我们需要考虑如何最有效的运用有限的屏幕空间。在这方面网格系统可以给设计师带来很大帮助:均匀分布的垂直线条结构可以起到引导和安置内容的作用。网格能够界定出空间是否均匀,从而能让设计师更轻松地判断出放置按钮、标题或图像的最佳位置。沿网格放置元素一方面能够给用户的旅程带来方向感,同时也能带来清爽、美观的视觉效果。

网格教程及神器:

wq201501152

滚动及滑动的空间

在用户浏览内容或者滚动屏幕时,一定要保证他们不会意外执行预期外的操作,或者激活不需要的对象。换句话说,屏幕上各个元素之间的间距必须足够大,让用户能够轻松在其间进行导航。

用户友好的交互

移动设备采用触摸屏界面还意味着视觉设计必须起到强化交互的作用;换句话说,视觉元素大小和位置的安排要保证使用的方便,并突出不同操作的重要性及相互之间的联系。

wq201501153

按钮点击区域

如第2节所讨论:按钮大小和间距的充足与否决定了交互能否轻松实现。在理想情况下,标准屏幕上的按钮大小应为44px到57px,高密度屏(视网膜屏)上为88px到114px。这个大小可以保证正常人的指尖能够轻松激活按钮。

能够得到看得见的控件

相关的交互对象应该能轻松用手指够得到,以方便用户更快捷地在彼此之间进行过渡切换。这样有助于减弱用户对交互操作之间彼此联系的困惑,进而提高复杂交互流程的进展速度。

讯息传递设计

在进行移动端设计时,物理方面的制约还只是我们所面临的难题之一。另一项难题是如何传递讯息。“移动为先”的理念教导我们移动用户通过移动设备和电脑所获得的价值应该是相同的。记住这一点后,我们就会发现,移动端讯息传递的设计会影响到各位设计师所要传递讯息的内容。

为了提高讯息传递效率,我们需要善加利用我们理解和解构信息的方式。人脑解译视觉信息的速度要远远快于文字信息,也就是说使用视觉元素和图像能够更加有效地提高讯息传递效率。优秀的视觉样式能够提高价值、为内容或交互的目的提供支持,并改善整体用户体验(既适用于移动端也适用于电脑)。

垂直节奏

我们要考虑的第一个提高讯息传递效率的方式是利用垂直节奏。信息架构能够创建出一套合理的内容流,而通过视觉设计我们可以进一步在内容的视觉层级内实现更高的明晰度。合理利用不同内容板块的大小和相互之间的间距可以创造出优秀的垂直节奏感,从而为内容层级的讯息传递提供支持。

wq201501154

除了前面提到的垂直网格体系之外,也可以用基线网格创造合适的垂直节奏感,让阅读和理解内容变得更加容易。明确地说,基线网格能够通过规范线条的粗细来创造结构。这样可以给文字方向和尺寸的界定提供明确的水平标尺,同时也能够确定不同内容组之间的间距。使用这些标尺可以保证文案的清晰易读,而且用户能够明确区分不同的板块和功能组。基线网格在HTML和CSS中的具体操作可能比较困难,但确实能够为设计流程中的大小和间距设定提供指导。

颜色使用

颜色是讯息传递的又一有力工具,其可通过多种不同方式支持内容和交互。

表现基调或样式

设计中的颜色是个非常主观,而且严重依赖于个人感觉和文化背景的东西。但是,通过使用特别的色调和阴影有助于表现设计师脑中想给人的整体印象。明亮大胆的颜色能给人带来乐趣感,较深的色调能营造优雅的气氛,而柔和的色调则可带来古典感觉。深入研究颜色理论可以帮助我们根据设局目标选择最适合的颜色。

色彩基础知识学习:《色彩搭配速成!3个实用方法帮你全面搞定配色》

区分不同板块

颜色可以用来区分不同的内容对象、显示对象之间的关联,或者支持内容结构,例如表现内容之间是彼此分离的。

wq201501155

区分静态对象和互动功能

使用强烈的对比有助于传达出你要表现出的区别或者不同内容及功能之间的联系。混合使用中性和明亮的色彩或对比强烈的色彩可以让特定的对象在用户眼中表现地更加突出。在设计中对颜色的连贯使用(例如全部静态对象使用相同色调,激活和非激活对象使用不同色调)可以更加明确地彰显出内容和功能之间的区别。

wq201501156

传达状态改变

颜色还可以用来在用户与某个元素进行交互后巧妙地表现信息、通知和错误状态。举例来说,很多网站使用绿色表示操作成功、红色表现错误信息,而不是使用冗长繁复的文字。通过连贯的使用颜色来快速传递新信息有助于提高整体设计的实用性。

使用象征

最后来讲讲象征。象征在视觉设计的信息传递中是一个非常强大的解决方案。通过象征手法,可以让用户联想到自己本来就比较熟悉的元素或视觉对象,从而达到快速理解内容和功能的目的。拟物化就是在数字空间内使用视觉象征的极致。拟物化是指将界面元素设计地和真实世界中对应的物体高度相似。另外,尽管Windows8和iOS7对拟物化的摒弃给这一风格带来了不好的名声,但它们以及其他很多应用还是在很大程度上于界面上使用了简约化的拟物设计。例如用垃圾桶表示删除、照相机表示摄像头、信封表示邮件等。

象征可以通过多种方法来支持讯息或主题的表现。

支持潜在的主题

象征手法可以用来对单一的设计元素进行延展,从而使其成为设计或功能的关键主题。在Flipboard这个应用中,翻转效果是用户交互操作中的一个不可或缺的组成部分,而这一效果的顺畅与否则是这个应用成功的关键因素。这一象征手法的使用可以快速向用户传达产品的理念,同时奠定产品独特的定位。

wq201501157

按钮与交互

在设计按钮时使用简单的拟物化来模拟真实生活中的交互元素,让功能更加明确。但有一点需要引起我们的注意:如果品牌或样式指南中要求使用比较简约的风格,那么可以让颜色和样式与静态对象产生明显的区别,从而让这一方法达到更佳的效果。Wunderlist的按钮就是用了模拟真实生活的风格

图标

考虑到有限的屏幕空间要求快速传递复杂的概念,因此图标对于移动端的设计非常重要。对图标使用视觉象征手法(特别是已经成为网上标准的图标,例如删除、摄像头和电子邮件的图标)意味着即便不附上说明标签,用户也能一看就懂。设计简单但明确的图标是一项有难度的工作,所以一定要理解图标对设计明晰度有何影响。

移动的未来

明确理解移动设备的制约和标准(正如本系列文章所述)对于移动设计师来说非常关键。但是,只有真正掌握了这些内容,我们才能够突破规范的限制、打破陈规,将创意发挥到更加独特、出彩的东西上。除此之外,我们还要不断思考用户的需求,努力实现功能与美观之间的平衡。

移动端的设计既是挑战也是机遇。技术的飞速发展和用户背景的不断改变意味着今天的制约在未来几年内就可能会消失。革新的思维和创意能够帮助我们探索发现看待这些挑战的新角度,让我们持之以恒地发现新的、漂亮的而且好用的针对设计问题的解决方案。

像好莱坞大片一样的教程,10分钟颤你一下!

标题短的,也可以是拿破仑:
《经验分享!超实用的文本处理技巧》

标题平常的,也可以是市井英雄:
《平面排版时,教你突出中文美感的几种方法》

标题吸引人的,也可以是人如其名:
《超全面教程!给照片添加文字有哪10个高大上的方法?》

原文地址:uxbooth
译文地址:uec.nq
译者:蒋灿

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量89万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/mobile-visual-communication-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 职场 版式设计 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里