简洁明了的UI交互手册[4]

31.Try Visual Hierarchy instead of dullness.

A good visual hierarchy can be used to separate out your important elements from the less important ones. A visual hierarchy results from varying such things as alignment, proximity, colour, tone, indentation, font size, element size, padding, spacing, etc. When these visual language elements are applied correctly, they can work together to direct and pause people’s attention within a page – improving general readability. A visual hierarchy can be said to generate friction and slows us down from skimming through the full page top to bottom – for the better that is. With a good visual hierarchy, although we might spend a bit more time on the page, the end result should be that we register more items and characteristics. Think of it as as road trip. You can take the highway and get to your destination quicker (bottom of page), or you can take the scenic route and remember more interesting things along the way. Give the eye a place to stop.

31.善于引导用户的视觉浏览线,而非单一布局

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。

32.Try Grouping Related Items instead of disordering.

Grouping related items together is a basic way of increasing fundamental usability. Most of us tend to know that a knife and a fork, or open and save functions can typically be found more or less together. Related items are just meant to be placed in proximity of each other in order to respect a degree of logic and lower overall cognitive friction. Wasting time looking for stuff usually isn’t fun for people.

32.将相关的条目分组,不要杂乱无章的排列

将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。

继续阅读“简洁明了的UI交互手册[4]”

简洁明了的UI交互手册[3]

21.Try Transitions instead of showing changes instantly.

Interface elements often appear, hide, move, shift, and resize as users do their thing. As elements respond to our interactions, it sometimes is a little easier to comprehend what just happened when we sprinkle in the element of time. A built in intentional delay in the form of an animation or transition, respects cognition and gives people the required time to understand a change in size or position. Keep in mind of course that as we start increasing the duration of such transitions beyond 0.5 seconds, there will be situations where people might start feeling the pain. For those who just wish to get things done quickly, too long of a delay of course can be a burden.

21.用一些动效过度而不用立即显示变化

用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长,那样会让想尽快完成操作的用户不耐烦。

22.Try Gradual Engagement instead of a hasty sign up.

Instead of asking visitors to sign up immediately, why not ask them to first perform a task through which something of value is demonstrated. During such initial interactions the product can both show off its benefits, as well as can lend itself to personalization. Once users begin to see your product’s value and see how they can make it their own, they will then be more open to sharing with you additional information. Gradual engagement is really a way to postpone the sign up process as much as possible and still allow users to use and customize your application or product.

22.循序渐进的引导用户而非生硬的要求用户注册

与其让用户马上注册,何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能,特性等。一旦用户通过简单几步的操作了解了程序的价值所在,那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。

继续阅读“简洁明了的UI交互手册[3]”

简洁明了的UI交互手册[2]

11.Try More Contrast instead of similarity.

Making your calls to action be a bit more prominent and distinguishable in relation to the elements surrounding them, will make your UI stronger. You can easily increase the contrast of your primary calls to action in a number of ways. Using tone, you can make certain elements appear darker vs. lighter. With depth, you can make an item appear closer while the rest of the content looks like it’s further (talking drop shadows and gradients here). Finally, you can also pick complementary colors from the color wheel (ex: yellow and violet) to raise contrast even further. Taken together, a higher contrast between your call to action and the rest of the page should be considered.

11.界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后,你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面,以达到突出重心的目的。综合所有这些,最后得到的界面会使你的主要意图与界面其他元素有明显的区分,得到完美的呈现。

12.Try Showing Where It’s Made instead of being generic.

Indicating where you, your product or service is from says quite a bit subliminally while at the same time moves your communication to a more personal level. Mentioning the country, state or city of origin is surely a very human like way to introduce oneself. If you can do the same virtually then you just might be perceived as a bit more friendly. Often, stating where your product is being made at also has a pretty good chance of making it feel of slightly higher quality. It’s a win win.

12.直接标出产地,别总单纯的讲历史

指明你的地区,所提供的服务,产品来自哪里意义重大,同时也将与客户的沟通引入了一个更具体带有地域特色的场景中。指出具体来自哪里,国家,省分及城市,也是一种在进行自我介绍或产品展示时被常常提及的。当你在界面设计中实现这点时,让人觉得非常友好。同时指明区域也会隐形提高产品的声誉,好上加好。

继续阅读“简洁明了的UI交互手册[2]”

张小龙:微信背后的产品观

  这篇文章,还是太概括了,那个8小时的视频啊。。。哪位有呢?

和菜头作为的特邀自媒体参加了《 腾讯大讲堂》的一场特别讲座,这场讲座的主角是微信之父,被誉为超级产品经理的张小龙,从Foxmail、QQ邮箱再到微信的华丽转身。

在这篇整理内容中,你将能够获得张小龙在移动互联网产品的宝贵心得,了解微信背后的产品故事,这是在完成一个亿级产品后的收获,对于产品经理、非产品经理的互联网从业者,都有极强的参考价值。

本文由和菜头整理(http://www.hecaitou.net/?p=7259),版权归作者及张小龙所有,转载请注明。

继续阅读“张小龙:微信背后的产品观”

导航 – 让用户“务入其途”

导航到底有多重要?它只是简单的指路牌吗?当然不是。导航在网站架构中占据重要的位置,它决定了网站的信息范围、分类及获取路径。好的导航设计将直接提升网站的可用性,进而提升品牌形象和网站的可信度。所以如何让进入网站的用户顺利地甚至是不知不觉地”务入其途“一直是我们不断探寻的目标。

导航的种类众多,扮演的角色自然会略有不同,有的可拓展信息,有的则做信息收拢,笔者初步将常见的导航功用划分成如下三类:

1.整体架构铺设,展示网站全局:

有几类导航的用途是将站内信息进行分类,并分层次展现给用户,让用户对网站全局有迅速地了解,并快速定位到自己想找寻的信息,这是一个平铺式引导的过程,对用户感知网站形状非常重要。这类导航主要包括:全局导航、局部导航、网站地图、公用程序导航和页脚导航等

全局导航:是网站架构中权重最高的导航,统领整个网站的信息架构,决定网站形状和整体的信息分类,通常使用固定模式。

局部导航:是在全局导航之下的用于访问下级结构的导航,经常作为全局导航下一个分支的平铺引导。形成局部导航的机制有很多,比如树状导航、垂直菜单、动态菜单等。

网站地图:提供网站的全局信息,使用体验上比全局导航和局部导航的组合要差一些,但对用户总览网站结构非常有帮助。

公用程序导航和页脚导航:这两类导航通常由全局性的操作链接构成,比如:退出系统、将用户引向帮助体系,或是实现同一家公司各种web服务之间的切换等。

2.跟随行为路径,缩小信息范围,实现线性引导:

当用户在大致浏览了全局信息之后,希望能快速定位到某个信息分支,进入具体功能页面开启任务或是进入内容页面浏览所需的信息,此时有几类导航将会随之出现,引导用户在网站中线性游走。这样的导航包括:分步导航、面包屑导航、搜索型导航、翻页导航等。

分步导航:属于很典型的线性引导方式,目的是让用户按部就班地快速完成任务。

面包屑导航:直接记录了用户访问网站的路径,表明当前所处的位置并提供返回上一级页面或是上一个访问页面的链接。

搜索型导航:搜索类导航是用户快速定位内容或是任务的重要工具,通过搜索和筛选可以保证用户行为路径的快速推进,也避免了“走投无路”情况的出现。

翻页导航:翻页导航在用户的浏览行为中更像是一种工具,让用户停留的信息层级保持不变,使该行为可以不断延续下去。

3.信息延展,引导用户进入更广阔的天地

在用户浏览完感兴趣的内容或是任务完成后,怎么能够让用户持续的留在网站中并开启新的旅程呢?此时提供相关信息的推荐成为导航的新任务,这样的导航包括:嵌入式链接导航,适应性推荐导航和相关链接导航等。

嵌入式链接导航:主要是根据上下文的内容以文字链接的形式扩展用户的信息量,或是帮助用户查找到信息的来源出处等。

适应性推荐导航:适应性推荐导航可以更加智能的匹配信息,从而实现相对精准的推荐式引导。

相关链接导航:和适应性导航有相似之处,同属于关联性导航的一种,可以让用户在意犹未尽的时候发掘出更多的信息。

综上所述,导航的设计与用户行为紧密相关,可以在不同的情境下提供不同的导航。但也有些网站的信息量极大,分类复杂,如大型电商类网站可能会出现多重信息分类维度以及分类与标签配合使用的情景,导致了导航的信息展现形式多样,加之导航还与交互逻辑和视觉样式有很大的关系,所以如何利用导航更好地满足用户的需求,解决用户的问题才是我们不断探索的目标和动力。