全国免费咨询热线:

400-611-9921

 
如何利用视觉元素有效传达信息?

2015-01-17

1757

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

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

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

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

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

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

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

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

  布局结构

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

如何利用视觉元素有效传达信息?,互联网的一些事

  滚动及滑动的空间

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

  用户友好的交互

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

如何利用视觉元素有效传达信息?,互联网的一些事

  按钮点击区域

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

  能够得到看得见的控件

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

  讯息传递设计

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

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

  垂直节奏

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

如何利用视觉元素有效传达信息?,互联网的一些事

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

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

  表现基调或样式

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

  区分不同板块

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

如何利用视觉元素有效传达信息?,互联网的一些事

  区分静态对象和互动功能

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

如何利用视觉元素有效传达信息?,互联网的一些事

  传达状态改变

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

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

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

  支持潜在的主题

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

如何利用视觉元素有效传达信息?,互联网的一些事

  按钮与交互

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

  图标

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

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

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

热门标签
房地产网站建设汇景网站建设汇景网站开发汇景控股新能源网站开发新能源网站制作奥动新能源网站建设奥动官网网站改版石油公司网站建设广州网站搭建广州市网站制作生物网站建设珠海方正官网建设方正官网建设日本YKK官网建设骏丰频谱官网建设斯帝罗兰官网建设高新兴官网建设三盟科技官网建设赛立信官网建设福美控股官网建设德国商会官网建设皇朝家具官网建设皇朝定制官网建设百利官网建设广芯微官网建设物联网网站建设芯片网站建设网站开发日本YKK官网百利网站建设办公家具网站建设广州建站公司广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设品牌网站建设赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设广州建站广州网站建设纵天科技
点击展开
关于纵天
广州市纵天信息科技有限公司成立于2008年,是中国领先的整合式互联网应用服务商。12年专业历程,坚持以科技创新为先导的网络服务,服务超过8000+知名品牌与创新客户,涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
微信咨询
官方微信
联系方式

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭