Wallace's UE

回到原点，今天有空，再来温习一下交互设计的一些基本思路和原则，整理备份了一下，也方便大家学习交流：

Anticipation 预知用户需要的

在提供功能或运用之前，预想一下用户希望得到的工具或服务，并在任务的每一个阶段给予指导， 这样会更容易抵达用户期望的目标。

Autonomy 协助用户自我管理

在通过简短的培训或向导以后，如果给予用户自我管理的权限，根据个人特点，最大化的发挥工具对个人的协助。...

《可用性工程》 作者：Nielsen

 

5.1 简洁而自然的对话

用户界面应当尽可能简洁，因为在屏幕上每增加一个额外的功能或信息，都意味着用户需要学习更多的东西，误解的可能性就会增加，用户从中找到所需信息的就会更困难。

界面应当尽可能地以一种自然的方式符合用户任务…，并且应当尽可能使用户在界面内的导航最少。

理想的情况当然是仅提供用户当前所需的...

《web界面设计》作者 Bill Scott && Theresa Neil

 

1.直接到达（完成）预定目标 或者说更直接化操作
2.更轻量级，更简洁- 联系上下文环境提供一些轻量级别简洁工具操作
3.页面停留控制--让用户在一个页面中停留而不是反复刷新页面。
4.页面提供引导邀请
5.过渡（过场）的使用
6.实时（或即时）响应

&...

      产品研发的过程中会涉及两个非常重要的核心内容，一是描述产品的需求（这里指的需求是用户的原始需求而非产品的功能需求），二是描述产品的设计。需求定义了产品的核心，是产品存在的原因所在，同时也关乎产品的商业价值同盈利模式等信息。产品的设计是产品的具体体现，在此仅讨论一下产品的设计文档。

      交互设计文档的主要目的，一是为产品的开发人员清晰地阐述产品功能...

相关UE学习小结：
1、根据界面可能的用户角色范围设计。
2、为扫描设计：设计简洁，表达直接。
3、不要让用户学习，假设用户不理解产品：
A、尽可能用文字表达意思，慎用图标；
B、图标要在尽可能在约定俗成的图标的基础上进行创作；
C、功能性的地方用按钮，并且按钮至少要有二个状态，一般情况下要有三个状态
D、只是打相应的页面用文字链接，并且链接在鼠标移上去时必须要有下划线（标题链接除外）并且链接点击过后要变色。
4、要让用...

1目标导向设计

 

可以把设计定义为更加具体的，以人为导向的设计活动：

l  理解用户的期望、需要、动机和使用情景。

l  理解商业、技术，以及业内的机会、需求和制约。

l  基于上述理解，创造出形式、内容、行为有用，以用，令人满意，并具有技术可行性和商业利益的产品。

以上适用于很多的领域，但不同领域中的关...

1前言及说明

决定人们喜爱产品的最主要因素是：产品是不是好用，即在实现功能的同时，操作过程是否易用，是否符合用户的心理模型。也就是产品的操作行为要符合用户的习惯，及符合心理模型。操作流程和功能布局对产品操作体验的影响最大，界面的美观性也会起作用，但也就10%左右。交互设计是关于操作行为的设计，而在设计行为的同时必然会涉及到功能布置和界面表现。所以交互设计对产品的用户体验和可用性，具有决定性地影响。

 

交互设计的...

有感于一些朋友的作品（尤其是页面\软件界面设计这种对精度要求很高的地方）在细节方面总是受到锯齿的困扰，而拉低了整体档次。特根据自己的经验讲一讲常见的毛刺问题。随笔写写，有些可能不是很完善很对~俺记性一向不好。另外像素风格图片、gif边缘锯齿不再这次讨论范围之内。

（本教程以cs3为例，快捷键的不同不再另行说明。另，cs4中新增的蒙版控制功能可以结合使用）

1、ctrl+t 类变形导致的锯齿问题

1-1 原因：常规选项设置不...

确认弹出框对用户真的有帮助吗，真的能避免误操作吗？以下是我的一些观点。

 

一：确认框ＶＳ狼来了

　　小时候我们都听过狼来了的故事，惯性的欺骗最后导致了毁灭。弹出框跟这个故事其实是有相似之处的。软件培养了我们这样的习惯：一看到有“确认”和“取消”的弹出框，甚至连提示内容都不看，就点了确认按扭。我们总是在“确认”“确认”...

要创建“流”的和谐状态，我们可以在以下几点上优化：

1：遵循用户的心理模型

   有篇文章是讲心理模型的，用户理解软件如何工作的方式，实际上并不一定完全是系统如何工作的方式（实现模型）。

    资讯门户网站中，对于新闻，因为它的即时性，排序的方式应该以时间排序；对于专业类的文章，它没有即时性，用户反而会关心它的热门程度，以点击或评论量排序会更有意义...

很有兴致的参观了一些关于网页和平面设计的博客，看了这些博客之后卢松松就冒出了这个想法，应该找到这些优秀的设计类博客的共同点，学习他们的优点。

一个不懂得欣赏优秀网页作品的设计师可能永远都无法懂得借鉴的真谛;一个无法将优秀作品的精髓融入到现有需求中的设计师可能永远都无法找到真正的灵感。即 便是那些看似独创的设计，其灵感也往往来自设计师在长期借鉴过程中的不断积累。设计源于灵感，灵感源于借鉴——这是每个网页设计师都应该牢记的“成功法 则&rdquo...

数位设计引入了一种新的图标设计样式。以下是设计和创建样式图标的具体规范。
图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是32位图标，并且边缘非常平滑。在矢量程序中绘制完每个图标后，再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和3D软件经验的图形设计者。

图标设计概述的目的是让您熟悉WindowsXP的新样式，为创建图标做好准备。...

适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人 
基础知识：HTML 


JavaScript就这么回事1：基础知识  

1 创建脚本块 

1: <script language=”JavaScript”> 
2: JavaScript&n...

　　设计用于支持人们日常工作、生活的交互式产品。具体说就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信以及交互的方式。
　　
　　第一章，交互设计简介：从用户角度而言，交互设计就是关于开发易用、有效而且令人愉悦的交互式产品。
　　
　　需要考虑：谁将使用它以及它将用于何处。另一个关注点就是，要理解人们在与产品交互时的行为类别。
　　
　　交互设计与软件工程的关系就如同房屋结构与土木工程之间的关系。
　...

微软word2007

1工具栏会随着窗口宽度的减小，而有变化。它的分区项数不会变，而先会重新排列工具项，如两行变成三行排列，使文字消失，而后会减小各项的面积，每一项用一个小图标表示。

2首先被消减显示的内容为最不常用的内容；

3菜单编排有条理，菜单-分区项-下拉或弹出-测拉列表或弹出-弹出

4不同的区域右击菜单内容不同；

5窗口的上下右位置，区域划分合理；
...

1.弹出框边缘应加强对比，这样在窗口层叠时，能有明显的区分；

2.对于嵌入式的按钮，应在按钮周围的面板上作出凹槽效果（通过光影变化）；

3.对于icon，要有统一的风格，如色彩或形体特征；

其中最大的收获就是对苹果的风格，有了更深入的感受。

下面需要思考的问题是：如何设计风格统一的icon，并使之与UI整体的视觉风格像吻合，对于按钮也是这样。

当在设计中我们讨论到，对于一个功能或元素是否应该添加的时候，秉承“如无所需、勿增实体”的原则，我们通常会放弃只有小众/小部分人群才会使用的功能或元素，这个小众/小部分人群的判断便会借用到经典的“马特莱定律”，又称“二八定律”。2004年长尾理论提出之后，便又开始充斥“长尾对二八定律颠覆”的说法，在经济学里提出了“只要渠道足够大，非主流的，需求量小的商品销量也能够和主流的、需求量大的商品销量相匹...

导读：一个好的设计师并不只是具有优秀的设计能力，对于沟通来说也是许多设计师必须掌握的技巧，不管是网页设计还是用户体验，沟通是我们与客户传达思想和设计理念的主要途径。无论怎样的设计，如果因为客户最后无法理解而被否定的话，那么将会是十分糟糕的结果。

对许多在大型企业中工作的用户体验设计师来说，经常感到郁闷的一件事情就是，自己拿着辛辛苦苦熬夜做出来的设计稿去给产品项目组中其他职责的同事一起过目，结果莫名其妙挨了一通不靠谱的板砖——小学学过画画的产品经理小A...

英文原文：http://www.editorial.co.in/wireframes/wireframes.php

当你需要为网站快速创建一个直观和可用的用户界面的时候，在写代码之前做好设计是基础。一个普遍的方法就是通过线框图来展现你的设计，线框图是一种使用线条为基本元素的绘画，与蓝图相对，像框图表现基本的导航和功能块，比如内容、功能等，这些都已经进入网站的创建。线框图的主要原理就是通过归类每一个页面上的入口和出口来保证设计的逻辑流程与功能。

可以...

临下班时，回顾了steve krug的经典名著《don't make me think》，梳理了其中的要点。

一、网站设计的首要指导原则：不言而喻，减少用户的认知负担，别让我思考；

二、浏览网页时，

      1.我们第一时间不是阅读，而是扫描；

      2.我们不做最佳选择，而是满意即可；...

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者...