全部课程

全部课程分类

培训乐帮返利流程

用户界面的视觉设计:图形用户界面(GUI)设计真实

2011-10-07 18:41    发布者:cc081053    评论:0    浏览:955
摘要:用户界面的视觉设计:图形用户界面(GUI)设计真实
        用户界面的视觉设计的历史,可以描述成是一个逐渐向真实感变化的过程。就如同计算机已经变得越来越快一样,设计师增加了越来越多的现实的细节--比如色彩、立体效果、阴影、半透明甚至于简单的物理学原理。这些改变中有一部分已经帮助提高了界面的可用性。WINDOWS界面中窗口背后的阴影让我们知道哪个是当前窗口。iPhone手机用户界面的物理学体验令设备用起来更自然。

        在其它领域,改善还值得商榷。图形用户界面(GUI)是最典型的例子。你在你的屏幕上看到的很多图形元素都是为了表达一定的想法或概念。桌面上的小房子不是一所小房子,而是“我的电脑”;眼睛并不是真的眼睛,而是表示“看这个选中的元素”;齿轮也不是齿轮,它的意思是“点击我从而能看到可用的命令”。

        细节和真实感能让用户分心,而不是关注于它们所要表达的概念。我从一本选取了一页,来详细解释这个道理。

Understanding Comics

“(除最左之画像外)其它的都是漫画里普遍存在的形象。例如,更卡通化的面孔就是指有更多的人可以被其描述。”

       最左边的图像,是一个特定人物的脸。最右边的图像,是“脸”的概念,它可以是任何人。当设计用户界面时,我们很少会去展现一个特定的实物,通常我们都想传达一个想法或概念。细节能很容易分散对要表达的意思或概念的关注。

Symbol vs. Photo

(左图)点我来拍照片! (右图)呃。。。??

      与此同时,一些细节显然也还是必需的。细节太少,用户就完全不能理解所要表达的意思。

 

What's in a face?

      左边的圆形很显然是一个人的脸。而右边的圆形不再能够识别出是一张脸。

      让我们看一个我们在用户界面实际看到的标志“我的电脑”按钮。通常,这个按钮用一个小房子作为它的标志。

Home Buttons

        最左边的是一所房子。最右边的是“我的电脑”的意思。在二者之间的,是从“一所特定的房子”到“概念化的房子”的变化。越真实的东西,就越难弄明白它所表达的意思。同样,如果图像过于简单,它就不再能被准确而迅速地辨识出来。

Home Buttons losing details

        最左边的是“我的电脑”按钮。最右边的可能也是一个向上的箭头;或者是SHIFT上档键。让我用一个完全不科学的图来说明这个概念:

Cognition

横轴代表"细节",纵轴代表"识别度",粉色区域代表"困惑"

        细节太多或太少,都会使人困惑并难以理解其含义。人们会识别出处在图中间地带的UI元素。

        诀窍在于找出哪些细节是能帮助用户识别出UI元素,而哪些细节分散了对它想要表达意思的关注。一些细节帮助用户识别出他们在看什么以及他们可以怎样与这些它做交互;而另一些细节却分散了对你想去表达的意思的注意。他们把你的界面元素从一个概念转变成一个真实的东西。所以,如果一个界面元素与真实生活中的实物过于不同,那就会很难识别。另一方面,如果它过于真实,人们就不能识别出你想表达的意思以及可能的意思。

Buttons

        最左边的按键过于真实了。最右边的按键没有足够的细节使其能被马上识别出是一个按键。

Toggles

        同样地应用在这些条状按钮上。阴影和倾斜度让用户明白他在看什么以及如何去和它做交互。增加太多的细节,无论如何最终都会成为困惑。条状开关不再只是个条状开关,而应是用户界面的一个组成部分,用真实的条状开关的图片可以很清楚的被辨识出来,但却失去了它的意义。它不再是一个图标,而成了一个特定的东西。

Home Button

(左图)让我们回到主菜单。 (右图)呃。。。。

一个例外


        至少有一个特殊的区域里多一点细节是好的:应用程序图标。你希望你的图标表达出一个独特的想法:您的应用程序。

Application Icons

        科达的叶子(Coda’s leaf )不是为了表达一个叶子的概念,它是一片非常具体的叶子:科达的叶子。 Acorn’的橡子Acorn’s acorn)不是随便哪只橡子,它就是Acorn的。添加细节将这些图案从普通的概念变成了一个特定的实物,对于一个应用程序图标来说,这正是你想要的。


 

结论


    图形用户界面到处都是图标。图标需要简至其本质。这可以帮助避免用户界面因无意义的干扰信息而凌乱,使人能更容易地去“阅读”图标并弄明白界面元素的含义。真实的细节能阻碍你想传达给用户的意思。

    目标就是不要把你的用户界面做得尽可能的真实。目标就是添加那些可以帮助用户能识别出元素是什么及怎样交互使用的那些细节,除此之外都不要添加。UI元素是表达概念及想法的抽象体;它应当只保留那些对其意途有用的细节。UI元素几乎是从来不描述真实的东西。添加太多的真实感会导致用户的困惑。
1 顶一下
更多>>
网页设计机构推荐
更多>>
网页设计课程推荐

  ¥80 ¥80

网页设计培训精英班

最近开班: 暂无
课程介绍:【课程特色】经典创想首席主讲教师精心主讲,按照Adobe Photoshop CS6实践应用技术进行章节划分,全实战模式讲解PS全部学习内容,按照设计工作流程授课,教程包含大量的实践技巧和案例演示,紧密结合美术设计原理和图像处理和绘图技术,学员可学到Adobe Photoshop CS6的全套技术知识;培训PS图像处理和绘图高手!

学费:电询   人气:117

  ¥50 ¥50

网页建设全能班

最近开班: 网页建设全能班
课程介绍:学习B班全部课程,同时深入学习PHP动态网站开发技术。学完能胜任各类企业的网页美工职位,并能独立建站与维护网站,以及掌握现有CMS系统的应用和二次开发。

学费:电询   人气:1034

  ¥50 ¥50

高级网页设计师培训班

课程介绍:古人学习书法的方式首先以临摹为主,然后以此为基础再形成自己的风格,如果能够师从名家,经过点拨,则更快更容易在书法界有所成就。网页设计的学习与书法极为相似,在熟练掌握设计软件的基础上,全面从配色、版式布局、字体搭配入手,在临摹优秀作品之后,通过不断的尝试和创新,最终形成自己的设计风格。

学费:1980元   人气:1030

  ¥50 ¥50

商业广告品牌策划提高班

课程介绍:学习最全新的平面、网页设计软件知识,同步临摹优秀作品,进行大量的案例操作,灵活使用设计软件。熟悉掌握电脑软件操作,为设计打下创作打下基石。在各个设计项目中巧妙地应用,设计精美的广告与网页作品。

学费:电询   人气:912

  ¥50 ¥50

3个月网页美工实战班

课程介绍:首先,欢迎走近我们的网页三剑客软件强化班课堂,学习之前先了解我们的课程特色和优势,以便于你更加快速的选择适合自己学的培训课程。

学费:电询   人气:266

网页设计相关文章
软件开发难学吗
学UI设计2015年毕业大学生新选择吗
上海跑赢职场为UI设计学员定制专属课程
上海跑赢职场UI设计-让你不仅仅是网页设计师
上海比较好的UI培训有哪些呢-如何选择一家好的
上海UI设计培训适合自己的才是最好的
上海UI设计培训班带你进入UI设计师行列
上海UI设计UI设计构图法
上海UI设计-跑赢职场为你保驾护航
零基础学UI设计如何选择培训机构
大学生就业新选择-UI设计前景广阔
穿戴设备UI设计新挑战
UI设计师如何与产品经理进行沟通
90后学ui享高薪未来
手机UI设计培训-如何选择培训机构
上海UI设计-UI设计菜鸟如何快速入门
游戏UI设计的酬薪概况及其前世今生
手机ui界面设计的三个方面
如何应对游戏UI设计的错误
UI设计需要什么样的美术能力


如果您要进行评论信息,请先 登录 或者 快速注册 。
评论总数:0

网友评论

为什么选择优训网
  • 贵就赔 报名价同班最低
    差价双倍返还
  • 顾问服务 培训最怕时间和钱花了,东西没学到
    专业顾问,给你内行建议
  • 点评返利 学完后分享点评,
    不仅能帮助别人,
    还能获得返利

服务热线:400-68-12568

扫一扫 就有礼!
关注优训网新浪微博
有价值的教育培训资讯 扫一扫 收听优训网微信