交互设计心得体会

学习心得：       

       老师整体讲得挺好,从中学习到了交互设计的精髓,即是“不要让用户思考”, 可用性是交互设计的基本目标。从中也了解了Web用户的行为特点，了解了一般Web可用性的基本要素以及比较专业的设计迭代和设计验证过程。回过头来对比之前做的项目,参照着也发现了不少问题和缺点,尤其是在设计流程上,也有时间因素没法花两三个礼拜要做设计迭代和验证。我们的原型和设计缺乏对最终用户群的设计考虑,出发点尚处在以自我观点为决策的阶段,没有为最终用户设计,这点是我们亟需改进的。除此之外,也讲到了web交互设计的一般法则 ,对我们以后开发也很有裨益。用户体验的提高需要各方的努力,不是光靠UE设计师一一个人就能达到。一个项目的用户体验好与坏,需要受众用户、产品经理、业务析师、视觉设计师、开发人员一起协同努力才能在一一个有限的时间达成。更多得可能还是需要在研发流程和规范上下药,提高用户体验设计的重视度,才能贯彻相同的理念互相协同起来,达到高用户体验的目标。

基于用户体验的手机产品交互设计原则
一、用户体验信息收集
       在讨论手机的交互设计方法之前,需要先对手机的用户使用习惯有一些基本的了解,需要对手机的用户体验信息做一些收集整理。收集用户体验信息首先需要确定两个问题:一是确定目标用户群体;二是确定信息收集的方法和途径。
      在确定目标用户群体的时候,很显然的是,已有产品有过使用和交互经验，具备该产品或系统的交互体验的用户,相比较于那些没有体验的用户，可以为设计提供更多更有效的信息。因此在收集用户体验信息时,应该首先考虑所需设计的产品的用户或是有过类似产品使经验的用户。在理想的情况下,当用户体验产品的交互时,设计师可以通过某种技术或是研究方法获得用户的全部感官印象, 掌握他们的情感体验。然而这些主观的体验信息很难实验室的方法收集或是客观的科学描述表达出来。因此我们只能寻求贴近实际的近距离接触用户体验的方法,就是深入访谈和现场观察。

那我们就来说说交互设计中的配色

交互设计中的色彩搭配

1. 色彩学概念浅谈

想要做好色彩的搭配，需了解一些色彩学概念。色彩学将颜色分为：同类色、类似色、邻近色、中差色、对比色、互补色。这几种颜色通过色相环的角度进行取色，如下图所示：

任意颜色都可以作为基色，每一个基色都有其相对应的同类色、对比色、互补色等等。

通常情况下，相邻的两个颜色，选择基色和邻近色之间的颜色，也就是与基色之间的角度 ≤ 60° 的颜色，会让页面的颜色显得和谐统一。
 

得到 App 服务内容卡片  QQ 音乐 App 榜单卡片

如果选用对比色和互补色，则需要控制颜色的面积，比如以红色为主的页面中可以出现蓝色，但蓝色的面积占比最好不要超过 20%。
除了色相上的变化，颜色还有明度和纯度上的变化，对于颜色的影响也至关重要。这三个词汇的概念如下：
- 色相 Hue：也称色调，是指色彩的相貌
- 纯度 Saturation：也称饱和度，是指色彩的鲜艳程度
- 明度 Brightness：也称亮度，是指颜色的明暗程度

色相、纯度、明度三者构成了色立体的概念，让色相环由二维变成了三维的概念。

2. HSB 色彩模式

RGB 和 CMYK 是我们较为熟知的色彩模式。而根据上文提到过的色彩学概念，在实际工作中我们也可以借鉴 HSB 色彩模式进行调色和选择颜色。
在 sketch 和 PS 的 HSB 色板界面如下图：

其中：

- 色相 Hue (H)：取值在 0-360 度之间
- 纯度 Saturation (S)：取值在 0-100 之间，数值越高色彩就越纯艳
- 明度 Brightness (B)：取值在 0-100 之间，数值越高色彩就越明亮

 

由于纯度 Saturation (S) 和明度 Brightness (B) 之间的数值都是在 0-100 之间，因此两者具备一定的对应关系。这些数值可以为你在选择颜色时提供依据。

具体怎么使用这些数值，我们用案例来说明：

案例 某 PC 端产品功能卡片需要做配色设计：

 已知产品的品牌色是以下两个颜色，其 HSB 色值如下图所示：

- 颜色 A：H=233，S=74，B=100（主色）
- 颜色 B：H=267，S=79，B=100（辅色）

因此卡片的衍生色我们可以使用：蓝色调 + 临近色，且临近色的颜色最好介于蓝色和紫色之间，会使产品页面颜色的搭配更加和谐统一。

于是我们可以先根据品牌主色：
- 颜色 A：H=233，S=74，B=100
来确定初步颜色，我们只改变色相（H）的数值，分别在 233 的基础上进行 +10 和 -10，由此可以得到三个颜色 A1、A2、A3，呈现效果如下图：
- 颜色 A1：H=253，S=74，B=100 - 颜色 A2：H=243，S=74，B=100 - 颜色 A3：H=223，S=74，B=100

现在的卡片颜色略显单薄，我们可以再给每一张卡片加一个颜色，做出过渡色效果。于是我们在数值 A1、A2、A3的基础上，保持色相（H）不变，只改变这三个数值的明度（B）和纯度（S）的数值。以颜色 A1 为例：


- 颜色 A1：H=253，S=74，B=100
现在，我们想要得到一个比 A1 更深一点的颜色 A1-1，根据色彩学理论，我们可以降低明度（B）的数值，这样颜色会变深，同时增加纯度（S）的数值，这样颜色会更沉稳纯正，为了保证数值可控，我们将明度（B）降低 26，将纯度（S）提高 26，所以可以得到颜色 A1-1 的色值：
- 颜色 A1-1：H=253，S=100，B=74
A1 和 A1-1 的颜色效果如下图：

 

所以我们的卡片可以使用渐变色：

 

这样卡片的颜色就基本确定下来了，我们可以再调整下卡片的细节，比如增加相关的背景插图，调整卡片上的文字排版等等，这组 PC 端卡片最后的效果如下图： 

3. 补充说明
一个页面中元素的色彩选择有很多影响因素，比如：产品的品牌色、页面的功能、页面的内容、氛围等等，所以还是要具体情况具体分析，综合考虑选择颜色。
当然，以上提出的这些数值只是参考，为的是给你的颜色选择提供理论支撑。在实际应用中，也还是需要设计师根据具体情况，以及人眼视觉感知的效果，酌情做颜色上的优化处理。