功能和细节设计,显示高清的网页设计也是没有影响的

当前位置: 威尼斯官网 > 广告色剂 >

图片 1

图片 2

图片 3

功能差不多的情况下,如何让用户一见倾心?微交互是决定用户印象的关键之一,今天这篇好文列举了使用微交互的注意点,以及五个最常见的使用场景,全是干货,来收!

如果你曾仔细观察过当今的网页设计,你会发现有一部分网站的画质已经相当惊艳了。从图片、背景到界面元素,无一不是高清画质,它们几乎是为高分辨率甚至视网膜屏幕的笔记本精心定制的网站,当然,这些网站对于网速的要求自然也更高一些,而与此同时,这样的网站在任何设备上浏览自然也就基本不存在模糊这回事了。

什么是双色调设计Spotify-Foundthemfirst

好的产品往往做好了两点:功能和细节设计。

到底什么是高清设计?

首先,简单来说:双色调就是使用两种颜色。

功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

Phive

这种技巧的名称和技术来自印刷学。双色打印是指打印时仅用一个颜色的两个色度或者是仅用一种颜色加黑色,这种处理方式通过使用两个色彩来从不同的角度呈现图片。

什么是微交互?

聊及高清或者HD的时候,我们提到最多的还是Retina屏幕。苹果通过自家产品制造出来的流行词汇目前已经成为了高清屏幕的代名词,要理解它,还需要了解一些和设备相关的特定技术词汇。

双色的概念非常大,潘通色卡中就有很多,包括对比色,相近色等,设计师们首先需要思考色板的限制和颜色的搭配,但是这个方法很有趣而且很容易创造。你可以通过PS,也可以通过其他双色梯度处理工具,比如Colofilter.css来进行这种创作。

微交互是产品中存在的某一个时刻,它完成了某一个小的任务。Dan Saffer在他的书中第一次描述了微交互的概念,这些小细节专注于服务这些必要的功能:

对于这个概念,Designmodo 的 Paula Borowska在撰文时的提法就比较易于理解,他将相关的概念都进行了解释:

正是因为在Spotify中的应用,这种设计风格才变得流行起来。双色调设计这种配色方案适用于音乐播放应用程序和各种微型促销网站。它为图片增加了独特的设计元素,这种设计元素来自著名的艺术家,并且具有广泛的适用性。

交流回馈或者动作的结果回馈

·像素是最小的显示用的物理单元。·像素密度指的是在单位面积内所能容纳的像素数量。·分辨率,指的是屏幕整个视野内横向或者纵向上像素的数量。·ppi,也就是每英寸内像素数,指的是每英寸内所拥有的像素数量,也是像素密度的单位。而计算屏幕ppi的时候,常常使用屏幕的对角线长度用来计算。·DPI 指的是显示分辨率,只有当每英寸像素数量超过200才能称得上是高DPI。

这项曾经适用于印刷装订的技术现在已经找到了在互联网环境下新的应用方式,并且成为了未来几个月内,我们可能经常会看到的一种设计趋势。

完成某个单独的任务

今天你所能买到的手机、平板和相当一部分电脑大都是高清分辨率的屏幕,它们能够很好地显示真正高清的网页设计作品。不过话又说回来,即使你所使用的屏幕并不是高清屏幕,显示高清的网页设计也是没有影响的。

显示性的图片案例New deal design

增强直接操作的感觉

图片

新的处理方式创造的视觉之所以令人惊艳,得益于古怪而大胆的色彩搭配,有趣的图像和色彩。当处理图像时不要害怕用的色彩和图像是否符合主流搭配,或者说你搭配的看起来并不像普通的那样看起来很舒适。都没关系,哪怕不合适也可以搭配起来,因为它的目的是要创造一个引人注目的视觉冲击,当然,除了色彩,还包括图像的对比度需要调整。

帮助用户在视觉上展示操作的结果,以及避免错误

Roswell

这里有一些扩大影响的技巧:

一些明显的微交互例子包括:

说道高解析度,你可能会最先想到高素质的图片。在视网膜屏幕大行其道的今天,宽度600像素,72ppi 的图片可以说已经过时了。

选择两种对比色或品牌的颜色。

当你将iPhone设置成静音时伴随出现的的震动提醒、屏幕上的静音icon。

正如上文所说,高清分辨率门槛是像素密度超过200ppi,这种像素密度之下,相同尺寸的照片所拥有的像素密度近乎之前的三倍。实际上,现如今旗舰手机的分辨率规格早已超过了之前桌面端大屏幕的规格,也就是说现在许多人手上所拿着的手机,不论是iPhone还是安卓机,它们的2K甚至4K屏幕已经超过许多人桌面显示器的1080P屏幕。直到今天,在 W3Schools 的文档当中,1024×768 依然是最广泛使用的分辨率,但是指的注意的是,超过30%的用户,已经在用高清的显示器了。

选择一张有聚焦区域的照片,自然景观的照片可能很难处理。

界面动画提示是否能够点击。

如果说桌面端分辨率的分裂让你纠结,那么移动端的情况就简单多了。iPhone 6 的分辨率是 401ppi,三星 Galaxy S5 是577ppi,其他国产也大都达到了这样的水准,高清屏几乎已经占据了巨大多数的市场。

选择一个高品质的图像,模糊或较差的图像不要和双色调混用。

为什么使用微交互?

所以,要做好高清设计,图片必须清晰锐利。当我们按照之前的标准来保存图片,在今天的高清屏幕上难免会出现模糊。不过这样的图片在加载速度上比起高清的图片更有优势,高素质的图片更加占用带宽,也需要更长的时间来下载显示。所以,尽量上传和所需显示规格相近的图片。

增强对比度。

微交互是在对用户一些自然的需求/欲望的认知和反馈。用户从微交互提供的视觉、触觉等反馈中确认他们的行为被接受。微交互还可以引导用户正确的使用系统/产品。

不过如果你担心加载时间过长,不妨使用模糊的背景图,这样一来,数据量更少,读取速度更快,同时还能兼顾到其他元素的高清显示效果。

考虑按钮或排版的空间。

定义微交互的使用情景

视频

选择反映照片情绪的色彩。

微交互的一个特点是它可以被放置在很多的场景下,辅助不同的动作行为。总体来说,微交互的使用场景包括:

Bellroy-outside

设置图像时避免彩色或者混合颜色的边框,可以用一个条幅或者视觉差的效果来搭配颜色选项。

展示系统/产品的状态

2016年的设计趋势当中,视频就占有一席之地。如果你曾留意过,会发现如今的优秀网页设计当中,以视频为代表的动态元素仿佛无处不在。和图片一样,高清设计对于视频的素质要求同样很高。

简单的颜色搭配案例125 Years Of Amazing

Jacob Nielsen在“可用性启发原则”中指出:让你的用户时刻了解发生的事情,用户期望对自己的行为立即得到反馈。但是有些情况下,app需要时间来等待行为处理完成后才能向用户发出反馈。因此,产品界面需要向用户指明此刻正在发生的事。

对于绝大多数的设计师和网中而言,一个短小精悍可循环播放的高清视频是个合理的选择,这样可以避免出现空档。当然,还有人会选择更长一些的视频,并使用加载动画来“缩短时间”。不过一般而言,高品质的视频需要高素质的录音、压缩和保存技术。

双色调不必是复杂的。有时最简单的双色项目最醒目。

▲ 下载进度表

所以,如果你要在网站中用好视频,那么一定要精打细算。以首页展示的全屏视频为例,所用的视频最好是水平方向,为了适配目前常见的屏幕比例,使用16:9 的视频来兼容宽屏,或者4:3的来填充宽屏。

Assurity公司就只用了红色和白色这两个最简单的颜色和纯净排版。条幅中包括多个半色调的风格,色彩明亮而迷人,因为红色是那种几乎能吸引所有人的颜色,所以很吸引人。

或者标明用户所在的位置:

当然,视频的使用还有一些特别的技巧,“静止视频”就是其中之一。在拍摄视频的时候,让场景中绝大多数的元素保持静止,仅有少量甚至只有某一个元素缓慢地运动,这样出来的视频效果,极富戏剧性,带来的用户体验也相当不错。

这里的技巧是,通过简单的设计有效的传递信息,确保用户不会忽视主要的元素。红色吸引了你的注意然后你就可以聚焦到图片上的文字里。这种类型的双色调效果给人感觉更正式,因为它仅仅给了用户一种不带强制性的引导。

Tips:不要让你的用户感到无助,让你的用户了解实时的状态并且向其展示进度

插画和背景

以此来增加可读性Viens-la

提示更新

Farkas

双色调可以用作颜色稳定剂,使文本有足够的空间和对比度。双色调颜色叠加可以帮助图像中色彩变化的“扁平化”,因为单一的颜色,所以文本几乎可以在图像上任何一个地方使用,并且保持可读性。

我们有时需要向用户推送通知来保证用户了解到事态的更新。动画可以做到这一点,动画可以吸引用户的注意力,避免用户忽视掉重要的信息。

插画和背景同样是高清设计中的一部分。请务必记住,在高清的图片素材中,每一个细节、每一个元素都清晰可见,所以需要确保其中的每一个元素都有助于整体美感的提升。

双色调颜色的选择并不会使文本变得十分明显,而是以一种更温和却足以为目标服务的形式表现出来。Holm Marcher Co.公司做的这个珊瑚蓝双色很有趣,而且创造了文字高度可读的背景。另外,导航元素使用的蓝色色调使画面变得更有活力了。

Tips:微交互里的动效应该遵循KISS原则,应该尽量简单直接。

所以,当我们谈及插画和背景的时候,细节就显得相当重要了。好不夸张地说,在高清设计中,插画和背景的使用需要精心打磨到每个像素都尽量完美,同整体的设计相得益彰,不论放大还是缩小都能同整体融为一体。

强调作用案例Holmmarcher

关联上下文

在技术上,你还需要使用可拓展的图片格式,让你的图片素材上能够随意缩放,从而可以作为高清设计的一部分。

虽然双色调效果追求大的图像,他们在较小的地方同样可以正常工作,比如它可以用来强调导航,辅助图像或特定类型的内容容。

使用动效来将用户的注意力平滑的在导航页面间切换,向用户解释页面里元素之间的关系,以及页面跳转的来龙去脉。这对于移动设备非常有用,因为屏幕的尺寸限制,移动界面中每一页的内容都很紧凑,使用动效来阐述内容之间的联系非常实用。

在设计高清的循环视频背景的时候,可以适当地添加一些提醒。对于那些快速浏览页面的用户可能会忽略这些细节,但是有趣的细节会让用户会心一笑,让他们成为网站的回头客。

小范围使用双色调的优势还在于,当你被技术吓到或者还不知道该来用它工作时,双色调可以使你设计的更自由。当在较小的空间中使用,它可以通过与多个不同颜色,不同设计的元素搭配,使画面变得更有趣以吸引更多的人。

Tips:尽量让每个页面的导航简洁,这样可以有效避免用户在页面跳转中迷失。两个状态之间的却换应该清晰、平滑、快捷。在视觉上统一所有的交互形式,降低用户的学习成本。

图标和元素

卡片样式元素的双色调设计,可以用于视频链接的覆盖或强调号召。通过色彩反差配色方案,双色调也可以起到一定的强调作用。

输入可视化

Sundays

背景作用案例Joinradio

数据输入是应用中非常重要的环节,微交互可以使用现有的元素来展示数据输入的反馈,从而将这步操作变得更加高效。

当你开始设计界面图标和其他元素的时候,你只需要知道六个字母就可以做好高清设计:SVG和CSS。几乎所有的图标和元素都可以被归类为这两种类型。

通过微妙的双色调设计可以创造一个有趣的背景图像或图案,而这种效果其他任何方法是没办法达到的。想要不做太大改动,仅仅想对品牌颜色进行调整或将流行的色调和技术添加到设计中的时候,双色调是一种理想的设计方法。

Tips:微交互能够帮助用户理解信息格式,来源,帮助用户便捷输入信息。

SVG或者其他可缩放的矢量图像,是高清设计中不可获取的一部分。你可以使用SVG来保存图形、图标和其他的界面元素,几乎所有现代浏览器都会支持SVG,少数古老的浏览器对此不大支持,它在浏览器中的渲染方式和HTML差别不大。如果你想对SVG有更加深入的了解,不妨访问Scott Murray的博客,作为这个领域当中的先驱,他的文章相当值得一读。

如上图,JOIN电台的背景就是一个完美的案例。颜色的变化几乎无法察觉,在设计中与其他用户界面元素无缝融合。有一个简单的动画,通过舒缓的运动使它的色彩变得十分动人。从主页的左上角移动到右下角遵循从亮到暗的转变,自然的视觉和阅读模式进一步鼓励用户滚动界面和点击。

引导互动

CSS 元素几乎是纯代码形式存在的,编辑起来轻松,缩放更是方便。你几乎不需要使用Photoshop来设计再贴到网页中去,W3Schools 的网站中有详细的教程供你学习。

结论

微交互可以鼓励用户、吸引用户与产品交互。它可以在用户体验中产生同理心。但是需要谨慎使用微交互,保证其在感官上不会冒犯你的用户。

SVG和CSS 有一个共通的地方:它们可以随着你的网站变化而进行适配,也就是说基于它们来制作的样式、图标和元素是响应式的。只要没有像素化的按钮,没有什么显示器能够让你基于CSS和SVG露出马赛克。

双色调设计可以调节过度使用的图像和元素,为画面添加有趣的元素,帮助完善视觉表现以吸引更多的用户。

时刻谨记:不要让用户感到厌烦,Keep it simple, stupid.

当然,你也不需要非得专门去找SVG和CSS元素,Tympanus的 SVG 按钮和CSS Button Generator就可以满足你的需求了。

另外,色彩搭配十分有趣。你永远无法想象,作为一个设计师,搭配两种不同颜色后,看到产生美丽的新元素时那种惊喜。无论哪种方式,创建一个双色调搭配就像在进行一种定制,是一种很有趣的工作。

Tips:关注用户的情感反馈,因为它在用户体验中起到很重要的作用。多做用户研究和情景调研,设计能被用户频繁使用的微交互方案。

结语

值得谨记的

真正的高清设计下的网站是能够从芸芸众站中脱颖而出的。用户会开始期待每一个页面给他带来的高清体验,从一块屏幕到另一块屏幕,而一个真正的高清设计下的网站,才能满足他们的需求。

微交互向用户展示动作反馈,通知以及信息框架结构

好在高清设计并不需要你全部推倒重来,从图片、视频到UI元素一点一点无痛的逐步改变是完全可以过渡过去的。注意品质,打磨细节,就是你要做的全部事情。

微交互应该通过转移用户的注意力、愉悦用户等来达到加快/缩短信息数据的传输

了解你的用户以及使用微交互的背景,能够让你的微交互方案更加的精准与高效

微交互必须能够支持长时效的使用,在第一次使用时感到惊喜的方案,可能在第一百次使用时就变成了困扰。

微交互方案应该人性化一些,并且在视觉上保持和谐。用户在使用的时候应该感到流畅,微交互的方案应该尽可能的从现实生活中获得启发,比如使用拟物化等手段,从而降低学习成本。

总结

用心设计,思考用户使用产品的情景,再设计这些微交互时多运用一些生活中常见的操作模式、物体的运动轨迹、常见的行为方式等。产品的易用性来源于对细节的打磨,伟大的设计不仅仅在功能上满足用户的需求,还要在微交互的设计上打动人心。

上一篇:这次也是主要分享自己在做字体设计上的一些方法和心得,UI设计师偶尔做几张海报 下一篇:本文少禽分享部分会令人须臾间暴走的荒诞设计,概念带到外带保健杯的设计上