UI设计理论知识,UI设计教程,UI设计知识,GUI设计理念,人机交互理论教程

UE全称User Experience，中文叫用户体验。 UX全称User eXperience，中文叫用户体验。 2003前后年传入国内，大概是与Usability同时。或者干脆说，它们几位就是被糊里糊涂的带到中国来的。放到一起讲，不仅因为它们之间的误会，确实是有很深的渊源。 首先Usabi...

UI全称User Interface，中文叫用户界面。 2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件金山，据说在2000年已成立人机界面组，虽然只有2个人。金山软件的UI 团队是业内名副其实的黄埔军校，培养了如今江湖上整整一代的设计领袖，并且他们出的...

相信大家对街边林林总总的房产中介并不陌生，那么我们先看看下面这张图片。 图1 从右侧这家店的橱窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例...

情感的容器 被寄托了的QQ2010视觉设计 ： 09年的电影缓缓的落下帷幕，以及新年伊始，轰轰烈烈催人癫狂的《阿凡达》。整年里，最让人我记忆深刻的还是《飞屋历险记》。 Carl与Ellie被南美的那个名叫“paradise fall”的瀑布魂牵梦萦，于是他们决定一天天的往容...

物质世界客观存在，而人的视觉成像是对当前世界的唯心重建。这种重建基于个人经验、感知和集体意识。最初科学家认为人类通过视觉被动获取周围世界的全部图像信息而建立个人的视觉资料库，近10年来的研究表明捕获全部图像信息只是个传说，其中由心理学家Danie...

相信每个前端工程师都有自己喜爱的 javascript框架，说情感也好，道信仰也罢，javascript框架带给人的不仅仅是便捷的开发，更有一种纯粹的逻辑美感，不管是jquery 曼妙的简洁，还是yui魔术般的沙箱，都使我们产生无穷的想象。然而，js框架却又必然无法做到面...

List: 1. 什么叫商品评论？ 2. 评论体系的存在意义 3. 评论体系的现状 4. 都有哪些元素 5. 该如何设计？ 6. 评论体系之外 1. 什么叫商品评论？ 个人认为，商品评论可以简单这么定义：人们对某商品的看法，无论是已购买者，还是非购买者。但如果光讨论商品评...

序言：在我的文章《》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。 纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么...

个人信息 联系方式 电话一定要有，虽然已经21世纪了，电邮啊IM啊都很方便，但最直接最实时的通讯方式还是电话，而且投完之后尽量保证手机畅通。 照片和性别 姓名 、性别 、年龄 、学历及学位都是最基础的一定要有，至于其他的尽量放相关的，体重...

去除无用的功能 研究发现： 80%的用户仅仅使用软件20%的功能 。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决...

当视觉设计师遇上产品经理、开发工程师 ： 我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的...等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应...

说实话，我还真没在公共场合真正好好说说白社会诞生的过程，她的样子是如何被我们一步一步勾勒出来的。这次，借助UED Blog的即将开张，算是正式的公布出来吧。 在接到白社会设计任务的时候，当时的SNS漫天飞舞的设计样式都是facebook、开心、校内的样式，那...

在白社会上线一段时间以后，我们的UI组接到了前所未有的挑战。设计一款游戏。OMG，这还真不是说做就做的，既然有这么好的尝试机会，做呗！ 其实一开始，我们并没有什么头绪，不知道从何下手。新招了三位同学（一个原画一个动画一个界面），虽然有手绘的功底...

...

解释一下文章title的意思，取自William Bernbach (DDB)1963年为Avis设计的广告。（原话为：When youre only No.2, you try harder. Or else）去年初开始接触淘宝蚂蚁聊天表情的设计任务，上面本来想找外包广告公司做，但后来由于种种原因，最后还是决定让我...

在字体排印学里，衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线体（serif）；没有衬线的字体，则叫做无衬线体（sans-serif）。 2007年摄于里昂古罗马半圆形剧场遗址（约公元前43年），从保留的石碑我们可以看出，1）所有的字母都是大写的，2...

原来的题目设想为界面视觉效果的统一性，但是统一这个词似乎有点敏感，怕触动萌点无数，而我也无意去设定一个什么什么的统一性来侃侃而谈，极为专业而考究，且毕竟是一篇文章，怕斩首细胞无数，索性改为一致略为妥当。泛泛而谈更是期望随意的态度，到哪算哪...

泛泛而谈UI视觉效果的一致性 ： 原先 的题目设想为UI视觉效果的统一性，但是“统一”这个词似乎有点敏感，怕触动萌点无数，而我也无意去设定一个什么什么的统一性来侃侃而谈，极为专业而考究，且毕竟是一篇博客文章，怕斩首细胞无数，索性改为“一致”略为...

Pixel art is a form of digital art, created through the use of raster graphics software, where images are edited on the pixel level. Graphics in most old (or relatively limited) computer and video games, graphing calculator games, and many...

在设计网页之前，客户或产品经理会提出对网页视觉风格设计的期望：活跃、大气、稳重、信赖、都市化.. 设计师一听到关键词或许很自然地在心里蹦出几个配色与关键词相匹配了。网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，...

当我说产品和业务模式、市场和运营策略、用户体验和界面设计都必须围绕着用户进行，且三者不可分割，必须融为一体。产品设计是一份综合性工作，只做好任何一块都不会成就好的产品的时候，很多人怀着疑问，因为在不少人心里商业利益和用户体验是对立。但我想...

UCD2009广州年会的主题是，会上我做了主题分享。虽然提前透露过，但还是有不少朋友说要提供PPT下载，但PPT确实太简单读不出来什么。干脆，我用文字表述一下分享的主要内容。 这里是第一节：产品设计是什么？ . Larry keeley 提供过这样一个产品三要素的模型...

五、过渡转化的使用 在《mind hack》一书中，揭示了人脑鲜为人知的工作原理。其中提到了突然的移动或闪烁会吸引人的注意力，这正是负责视觉处理的第二块区域的功能。这就说明了动画或动态的变换效果会成为web界面中吸引人注目的地方。过渡的使用它会造成视觉...

三、不要打断任务流 用户在每选择一个操作时都希望当前的任务是连贯的。页面刷新会人为的造成用户体验或者说用户心流的中断。 [在由harper pernnial 出版的《心流：最佳体验的心理学》一书中，把定义为：当人们进入一种全神贯注的状态时，他会感觉一切都是水...

好的设计绝不是单纯的因为天才的创意或者灵感爆发的一瞬间而产生的，只有设计师在持续改进的迭代方法中才能达到好的效果，你必须通过不断的质疑自己，在不同的设计种找到缺点，并寻求 更好的方案来改进它。 在他的 里提到了关于 告诉我们如何发现并找到解决...

瞬间设计是什么？ 良好的用户体验，全在于那些完美的瞬间。在第一个瞬间，假设当一位用户从购物搜索结果页面跳转到某个店铺的时候，他此刻可能是想看看这个店铺的风格及其信用；而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝贝介绍。再然后则...

启发式评估概述： 启发式评估（Heuristic Evaluation）是一种用来发现用户界面设计中的可用性问题、快速、高效、低投入的可用性方法。 启发式评估是让一小批评估人员依据启发式准则来评估界面，判断这些界面是否符合这些准则，指出其中存在的可用性问题并提...

基础背景介绍 1）据深圳移动调研，目前阿里客户的主流手机屏幕分辨率通常是176220和240320，考虑到目前手机发展的实际趋势，建议以240320为主要设计平台； 2）176220屏幕，通常是我们一般意义上的FeaturePhone，字体尺寸一般为16px，少部分为12px和14px； 3...

在WEB2.0 网页充斥的年代，身边无时无刻都听到这样的声音：拒绝海报式设计，要做有用的设计，要简洁，要清爽，要大气产品经理如是传达。而活动类网页听上去和这些词语又那样的格格不入，另一种市场声音：做活动，我们可以不同，我们要视觉冲击强的，要吸引眼...

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。 1. 检...

Segway，一种具有自我平衡及便捷机动能力的两轮移动工具，曾一度被称为划时代的发明。随着其价格的降低，越来越受到个人消费者的青睐。在你愿意花五千美元买一架 Segway 让自己成为一个超酷的神行太保之前，让我们看一下它的产品目录设计是如何利用简单的矩...

Web Accessibility Initiative Accessible Rich Internet Applications 认识ARIA 目前互联网应用日益增强，其中大部分是通过混合技术（AJAX、DHTML、JavaScript 和 SVG）创建或自定义一些模拟桌面GUI程序的的 Web widget 小组件来增强 Web 应用程序的交互，...

事物绝非十全十美总有强差人意的一面，之前针对浮动分析了其引起文本重影的怪异问题，而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。 1.position:relative;属性值导致overflow:hidden;失效。 问题：在IE6/7中子级设置position:relative;属性值后，导致...

CSS 3 不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了 谨以此文纪录ISD WEBTEAM 09年Q2力作：CSS 3.0 中文参考手册 背景 苏昱的《样式表中...

这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。 1.性能差异 【border:0;】把border设为0像素虽然在页面上看不见，但按border默认...

最近在处理Qzone黄钻图标更新时，想起近期对业务图标进行优化所遇到的一些问题，把思绪收拾起来和大家一共探讨，欢迎多方声音。 在实际工作中，图标类的应用非常广泛，如同数组般的等级图标更显其特殊性。下面要共同探讨的两个方向，以什么方式实现及怎么更...

浅析Banner构成与创意设计 ： 当用户走访 一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉 用户来到这里会得到什么有用的信息，因此网页Ba...

作为 Nokia 寄以厚望的一个系统，Maemo 承载着 Nokia 在高端手持上的创新理念。无论是从封闭式平台到开放式的平台的跳跃，无论是从一个以厂商为核心的到以社区为中心的重点转移，还是一个用户参与程度更高的更具触控魅力的 UI 界面。 我们找到了一个关于 Mae...

很开心可以和导师阿坚在08gui大赛中一起去完成《fight》的图标设计，在这个过程中真的是受益匪浅！这里我谈一下在这个过程的一些小小心得。 首先在创作初期，我先描述了自己的想法，主要的设计方向是一套骷髅主题的图标，阿坚并没有赞成或反对这个想法，只是...

基本原理 这些具有动态效果的滑动盒都基于同样的基本原理。在你经过想要窥见对象中的其他两个项目，这个带有.boxgrid的DIV标签充当着一个窗口。还不明白? 让这个图片来给你线索吧： 理解了这个基本原理之后，我们就可以利用滑动元素的动画效果来揭开或遮盖住...