Skip to page: 0 1 2 ... 624

案例—减少用户的思考

null

·介绍
QQ空间相册的个性化利器,能对照片进行效果的优化、文字编辑等等。

从设计上使用了创新的手法,尽量减少用户的思考。其中,通过界面的特殊表现,让用户更容易学会使用。在使用的过程中,也避免了复杂的操作方式,降低使用门槛。

·定位

了解用户需求
·用户期望照片编辑工具拥有“玩”照片的成分;
·大多数用户反映,最需要的功能是旋转、裁剪、添加照片的边框;
·能给照片添加文字、装饰品;
·对照片进行颜色或其他效果优化。

分析用户需求
null

除了可以对照片进行简单的角度旋转,尺寸裁剪、调整;同时可以给照片添加边框、文字、装饰品;还能够进一步对照片处理亮度、模糊等等…众多功能已经足以让照片编辑工具显得复杂,并且带来的是较高的使用学习成本。

作为相册的照片编辑工具需要易学、易用。甚至只需要一些简单的优化步骤已经足够满足需求。即使是熟练使用Photoshop优化照片的用户,选择照片编辑工具也只是想方便、快速实现一些简单的个性化效果。

·设计
对照片编辑工具的要求,从基础的优化照片,到照片的特效处理,并尽可能多的个性化照片功能。但前提下需要让用户可以很容易找到基础的优化功能,界面需要直观且容易使用。当然,不是一个摆满所有功能的编辑器,并附带一份使用教程。

界面布局能让用户理解
界面设计传达给用户的亲身感受是最直接的。界面的功能太多、复杂,则会让用户在使用照片编辑工具时有很高的学习门槛。从界面布局入手,设计界面的布局结构。

简化并设计布局结构
设计照片编辑工具的界面,尝试将所有功能分布在三个不同的区域:
1.对照片的简单效果优化
2.可添加到照片上的个性化装饰
3.照片预览区

null

把所有的功能呈现在界面上,让用户逐步尝试每一个功能对照片的变动,然后再找到他所需要的功能;或者说在众多的功能下找到需要的某一个功能,也不是一件易事。若对于仅仅只是想把方向颠倒的照片旋转矫正、裁剪尺寸,会把一些多余的功能占据了照片预览区。

如何合理得地归类功能,调整一个合适的布局结构,让界面理解起来更加简单,却不会让更多个性化的功能淹没?

编辑照片,所见即所得、核心的内容则是照片预览区,其次是提供一个固定的编辑照片功能区:把所有功能集中在固定的区域,可以更容易找到。

null

功能区
依据大部分用户朴素的需求,把最常用的功能放置在最容易发现的位置。当需要更个性化照片的时候,同样可以很方便找到入口。

null

可扩展的功能区—添加装饰
考虑到“添加装饰”功能会有很多装饰品,需要一个固定并且明显的位置。照片编辑工具的核心是让用户可以在简单优化照片之余,还可以“玩”照片。所以这个区域的设计是让用户在需要的时候打开使用,通过技术上的特殊处理,同时也能让用户自行控制,切换为固定的可添加装饰的区域。

null

一个有序的学习过程
这样的界面设计让用户在第一次使用照片编辑工具时降低了门槛。界面布局的简化能让用户更容易理解,对照片的编辑、优化、等更多的操作,都能在固定的一个位置,更容易找得到。整个使用过程都是可预知的。

避免复杂操作
众多的功能,如何让用户每一个都能学会使用,也是一个棘手的问题。

例如:常见对照片的优化,都会使用复杂的“模式化对话框”(比如:调整亮度)。
null

模式化对话框“好处”
双重保险,调整到合适的效果后,再确定;不满意,取消。可避免大部分的误操作。

“坏处”
需要完成当前操作,当前的操作若不“确定”或“取消”,则无法进行其他操作,对话框被模式化,挡住了背后的其他操作。
操作越多步骤越多,每个操作都需要确定一次,显然不是每一个操作都需要,甚至会造成用户的困扰。

对于照片编辑工具,我们需要的是更简单,并且便捷的操作过程。尽量避免模式化对话框,成为设计上的禁忌;当然,并非一味想办法把模式化对话框都“cancel”。

在对功能进行归类的同时,把复杂并且容易出错的操作,是更需要“双重保险”的:比如照片裁剪功能。裁剪功能往往不是一步到位的操作,需要多次调整图片的裁剪区域并确认裁剪范围后,才会保存。若有不满意的情况,需要让用户从头再来或放弃。

null

“撤销”操作缓解了误操作
撤销上一步的操作,对发生误操作或操作后不满意的情况下,比起每次操作都需要“确定”,使用过程会更加方便。

比如锐化、对比度、亮度,这些操作都是显而易见,也是比较容易让人可以猜到的。而正当需要使用这些操作的大多数情况都是很直接的。如果对调整的效果不满意,将滑动块移回初始状态即可;由于设计上使用了下拉菜单这类型的轻量操作,在发生了误操作,撤销上一步的操作可以回到原先的效果。

比如:点击模糊功能>展开调整菜单>调整完成后>不小心点击了菜单外其他区域或转到其他功能时>菜单收起,照片效果变了。

那么此时可通过撤销操作来恢复调整前的效果:

null

·最后
我们将会在体验这一块不断去思考、尝试,进一步提高易用性。至少,我们的思考能减少用户的思考,会是让产品更有利健康地成长。

体验一把:qzone相册中点击照片编辑器或查看照片时点击编辑打开照片编辑器。

Hello! 404

1. 什么是404

        404是一个 http 错误代码,即请求的网页不存在。代码404的第一个“4”代表客户端的错误,如错误的网页位址;后两的数字码则代表着特定的错误讯息。就是当用户输入了错误的链接时,返回的页面。这样的目的是告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开。


Google简洁的页面与的品牌精神是一致的,包涵基本的出错提示和问题描述

  
2. 为什么需要404页面

        搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时,即知道该URL已经失效,便不再索引该网页,并向数据中心反馈将该URL表示的网页从索引数据库中删除,当然,删除过程有可能需要很长时间;而当搜索引擎得到“200”状态码时,则会认为该URL是有效的,便会去索引,并会将其收录到索引数据库。所以,自定义404错误页面不仅是增强用户体验的好做法,而且对搜索引擎也是相当重要的。
 

3. 良好的404页面应该遵循的理念

①提供简明的问题描述,用轻松的话语消除访客的挫败感,使得访客转到某个地方而不是后退。

②提供合理的解决方案,辅助访客完成访问目标。

③提供个性化的友好界面,提升访问体验。

用幽默的语言和亲切的贴纸画面打消用户的挫败感

[dict.qq.com]
 

4. NO! 拒绝乏味

        一个拥有良好设计的404错误页面可以帮你避免失去用户的信任,潜在地建立你的用户关系并能留住你的用户,使其在浏览你的网站的时间更长。下面给大家带来一些创意的404界面设计参考,希望你能喜欢它们并能从中获取灵感:

方法① :整体一致性

404页面同样需要保留本站的基础元素,让它看起来还是你的网站,让用户迷茫的时候能够回想起自己为何身在此处;

 

方法②: 让用户跟你走

给用户有用的链接,避免过于简单和技术,用丰富设计把用户拉回来,报告错误原因或提供联系方式,减少挫败感,减少那些痛苦的、毫无帮助的信息。增加建议让用户跟着你走, 利用转向将用户导入指定的页面;


 

方法③: 用轻松的手绘涂鸦风格

用轻松的手绘,表达放松的心情,404错误并不可怕,请原谅我们美丽的错误;


 

 

方法④: 精致的细节刻画

精致的设计往往可惜吸引用户驻足观看,仔细观察,生怕漏掉细节,当用户被精致打动的时候,对你的网站就会平添更多的怜爱之情;

 

方法⑤: 楚楚可人的道歉

用情感打动用户,挽留它们的关闭和离开;

 

 

方法⑥: 拟物化的场景烘托

用实际物体为元素设计的404页面,可以更好的和本站的主题契合,实物有不可比拟的真实感,是一种很好的表现手段;


 

 

方法⑦: 幽默的手段和趣味情节

老奶奶找不到自己的宠物了!Oh~~原来坐在了屁股底下……

多么可爱的错误啊,看到这一切,您还会为404的小错误生气么?放松一下,给错误带上幽默的情节,原来错误也可以很美……

版权所有 © 2008 - 2010
您看到的文章来自 腾讯CDC博客 [cdc.tencent.com] ,原文链接为 http://cdc.tencent.com/?p=2907 ,转载时请注明出处。
Skip to page: 0 1 2 ... 624

崔凯,前端开发
Powered by Gregarius | Theme by ck web design | TOP 顶部
Copyright © 崔凯的博客 All rights reserved. 京ICP备09029324号