征集网锐志网络淘途找素材上91123RF图片库
创意在线首页
官方微博:腾讯
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
交互设计首页
当前位置:首页 > 交互设计 > 观点 > 正文
页面表达原则
作者: 来源:isd.tencent.com 发表时间:2010-4-21 10:53:54 浏览:

为了让用户预览到自己空间中的导航换上皮肤的效果,这里显示出了用户个人空间中的导航。显然这里并不希望用户通过它离开商城。但是,这里的“主页、日志……”却是可以点击的。
为了挽留用户,且避免误操作,不得不弹出一个对话框:

实例二.Photoshop CS2中,一个工作窗口可以拖动的范围更大了,如图:

以前的版本只能这样:

与以前的版本相比,最顶部的80px也可以用作显示工作窗口了。PhotoshopCS2提供了更大自由度的操作。但是,如果把工作窗口拖上去,菜单栏、辅助工具栏就会被遮挡住。在遮挡住的状态下,要想点击“显示变换控件”这个复选项,又不得不再把工作窗口拖下来。更糟糕的是,也许有些用户会根本就找不到这个功能了。

虽然遮挡住菜单栏是用户自己的操作导致的,但是这并不能说明这个设计是没问题的。用户在遮挡住菜单栏的时候并不总能意识到操作将产生的全部后果。

在photoshop CS3中,这个功能被取消了。

实例三:

当用户在Qzone商城中将播放器放在上图这个位置时,很可能没有意识到“装扮空间”、“自定义”、“信息中心”三个链接将会被挡住,无法点击了。
允许用户在页面上任意位置摆放装扮物,这样强大的功能并没有建立在“不出错”的基础上。

不提供多余的功能的观点来自于alan cooper的“以目标为导向的设计理念”。

“以目标为导向的设计理念”首先区分了用户的“目标”与“任务”这两个概念。
目标是用户需要最终做到的;任务是为了完成目标而不得不完成的操作。任务不是用户的需求。如果可以完成更少的任务就达到目标,是更好的。一个产品是在帮助用户实现目标。用户使用产品的过程是借助产品完成自己目标的过程。因此,在帮助用户实现目标的前提下,产品要求用户进行的操作越少越好。

3. 结构化更易于理解

结构化是指:将信息归纳、整理成若干条,以条目的形式展示的做法。类似下图:

将较大信息量的文字信息逐条展示可以提高读者的阅读速度,提高阅读效率。

显然下面这样一段说明文字是很难阅读的:

请您务必填写个人真实资料,如果因为您的个人资料填写错误所导致无法成功办理中信QQ信用卡及无法获赠QQ会员,腾讯及中信将不承担任何责任。QQ用户点击“下载申请表格”,(下载申请表后,不要修改文档,直接点击打印,否则无法进件。请务必完整打印出申请表与申请合约,并寄回信用卡中心。)打印后并填写好申请表,准备好身份证复印件(必须),以及其他备选财产证明文件:其他信用卡的复印件、车产证明复印件、房产证明复印件、收入证明复印件、交易额等证明复印件,装到信封内,即可邮寄到“深圳邮政028-222信箱”,或者快递到“广东省深圳市罗湖区笋岗路12号中民时代广场B座29层 进件室”,邮编518029。中信银行信用卡中心在收到申请资料后,即开始审核信用卡的申请,申请的注意条款、申请进度查询,详见网址http://bank.ecitic.com/cards/,或者咨询中信银行信用卡客服中心40088-95558。选用此方式办卡的用户可获得价值120元QQ会员礼包(12个月会员资格)。QQ用户在申请成功并获发信用卡后10个工作日内,将开通该用户的QQ会员资格6个月,成功激活后,再延长该用户6个月的QQ会员资格,注:QQ会员服务由中信银行购买并赠送给QQ信用卡客户。之前通过手机、小灵通、宽带、电信付费开通会员的用户,此次暂无法享受赠送。申请用户必须是中信银行的新用户,才可以享受赠送会员服务的优惠。如果您已经拥有中信银行的信用卡,则再申请中信银行QQ信用卡不享受赠送的QQ会员服务。

将这些文字分成若干条,阅读起来就容易多了:

A、申请用户必须是中信银行的新用户,才可以享受赠送会员服务的优惠。如果您已经拥有中信银行的信用卡,则再申请中信银行QQ信用卡不享受赠送的QQ会员服务。
B、如果因为您的个人资料填写不准确而导致无法成功办理中信QQ信用卡及无法获赠QQ会员,腾讯及中信将不承担任何责任。
C、下载申请表后,请勿修改文档,直接点击打印,否则无法进件。
D、请务必完整打印出申请表与申请合约,并寄回信用卡中心。
E、邮寄材料:打印后并填写好的申请表、身份证复印件(必须)、其他信用卡的复印件、车产证明复印件、房产证明复印件、收入证明复印件、交易额等证明复印件。
F、邮寄地址:深圳邮政028-222信箱。或者快递到:广东省深圳市罗湖区笋岗路12号中民时代广场B座29层 进件室 邮编518029。
G、中信银行信用卡中心在收到申请资料后,即开始审核信用卡的申请,申请的注意条款、申请进度查询,详见网址http://bank.ecitic.com/cards/,或者咨询中信银行信用卡客服中心40088-95558。
H、选用此方式办卡的用户可获得价值120元QQ会员礼包(12个月会员资格)。QQ用户在申请成功并获发信用卡后10个工作日内,将开通该用户的QQ会员资格6个月,成功激活后,再延长该用户6个月的QQ会员资格,注:QQ会员服务由中信银行购买并赠送给QQ信用卡客户。之前通过手机、小灵通、宽带、电信付费开通会员的用户,此次暂无法享受赠送。

4. 信息的表达应该清楚、明确、直接。

清楚、明确、直接是信息表达的一个基础要求。但是这也是做不容易做到的。
实例一:

问题1.副标题表意不明确

这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明:“在这里添加文字内容,显露您的心情”,说明的效果会更好。至于“让好友都知道!”这几个字几乎是没有用的,没有传达任何信息量。

问题2. “脱掉”按钮不易找到

“脱掉”按钮在框的右下角,很多时候会出现在预览区以外,看不到,并且文字超小,无法阅读。

实例二:

“您还没有登录”所以“请先登录”。这是很清楚的逻辑关系。

“原因可能是长时间未操作而失效,谢谢合作!” 是什么事情需要解释?其实这是在说另外一个事情:“您很奇怪刚才登录过,现在为什么又要登录吗?我告诉您:原因可能是长时间未操作而失效…”

这里的表述过于追求文字上的简练了,把两个问题混为一谈,没有表述清楚。

5. 操作可识别

链接应该象链接,按钮应该象按钮。蓝色、带下划线的文字是目前链接文字通用的表现方式。按钮应当是有立体感的,看上去就感觉像是可以点击的。
操作可识别原则是为了保证用户触发操作的有可能性。

QQ空间中有个不好的例子:

有输入框,但却看不到验证码图片。 “没看到图片我怎么知道要输入什么?”“不知道要输入什么,我就不去不输入啦。”操作前表达的不够清楚,会影响触发操作的可能性。
(上面那行温馨提示算是个补救措施,但并不能解决问题。如果都靠提示就可以了,那么就不需要设计师了,有作家就够了。)


1 2 3



在线编辑:wlx
本文链接:


推荐阅读:
·年度出版物《中国创意设计年鉴·2016/2017》征集公告
·HAZZYS哈吉斯第二届原创插画设计大赛
·青春唯美插画培训网络远程班正在招生
·创企同盟VIP:网络品牌建设提供商-木兰设计
·2017大艺时代全国原创插画设计大赛征稿
·二十四节气标识系统设计征集函
·39800元 奉节县征集“三峡之巅”LOGO
·10000元 2017第三届“海上丝绸之路”创意设计大赛
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

创意素材推荐 矢量 | PSD | 模板 | 高清 | PNG | 网页背景
2009-02-06
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
近期推荐报道 返回首页更多精彩等着你!

Illustrator| 用AI创建精细矢量插图徽章Photoshop| PS经典合成张开血盆大嘴樱桃
Photoshop| Photoshop自制个性的黑色翅膀摄影佳作| 德国Thomas Wuhrer长腿女郎性
Photoshop| Photoshop制作超酷的边缘发光的荧CorelDraw| CorelDRAW制作编织效果详细教程
Illustrator| illustrator制作潮流海报字体摄影佳作| 惊艳的Francesco Marconi
Photoshop| 利用画笔及图层样式制作方格子艺术纹理背景Photoshop| Photoshop制作简单时尚的彩色放射
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:whaternet
网站地址:http://whaternet.com/
加入时间:2014-8-5 13:59:20
网站名称:mnnaite
网站地址:http://www.mnnaite.com/static/
加入时间:2014-8-5 13:58:07
网站名称:tijuanaflats
网站地址:http://tijuanaflats.com/
加入时间:2014-8-5 13:55:32
网站名称:digital
网站地址:http://production-digital.com/
加入时间:2014-8-5 13:54:45
网站名称:deutschesee
网站地址:http://www.deutschesee.de/
加入时间:2014-8-5 13:51:54
网站名称:kennedy
网站地址:http://www.kennedyandoswald.com/
加入时间:2014-8-5 13:50:57
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿