UI设计学习笔记

 

[e-mail]

两个三原色系

在色[相]环上，距离近的为相邻色，相对的色为互补色。

根据相邻的程度，由近到远：同色\相邻\中差\互补。

两种三原色下，互补关系有些许的差异，一般观点认为差异不大，但美术工作者多以传统的CMY为准。

调色中常用的HSV 色系中的色[相]（hue）是以RGB三原色为准的

名称	加色法三原色 电脑三原色 色光三原色 RGB（红绿蓝） 发光三原色	减色法三原色 物料三原色 颜料料三原色 CMY（品红，青，黄） 反光三原色
原理	光线混合调色	反光物质混合调色
用途	发光器件，如电子屏幕	反光颜料，如印刷，美术
三基色
12色[相]环

HSV(色[相]/饱和度/明度)色系

	H取值范围[0,360],一周360度。S和V取值范围是[0,1],因为习惯上常用百分数，取值范围为[0,100]。三个取值范围，在三维空间形成一个圆柱形
	事实上，随着明度(Value)的降低，饱和度（Saturation）的取值对结果颜色的影响变得越来越小。事实上，如果光线很暗的话，已经很难辨析饱和度的差异。所以，如果使用浓度（Chroma）来代替饱和度更合适，本质上整个颜色空间是园锥形的

HSV与RGB转换方法

Java script源代码

function RGB2HSV(rgb) { 
    hsv = new Object(); 
    max=max3(rgb.r,rgb.g,rgb.b); 
    dif=max-min3(rgb.r,rgb.g,rgb.b); 
    hsv.saturation=(max==0.0)?0:(100*dif/max); 
    if (hsv.saturation==0) hsv.hue=0; 
    else if (rgb.r==max) hsv.hue=60.0*(rgb.g-rgb.b)/dif; 
    else if (rgb.g==max) hsv.hue=120.0+60.0*(rgb.b-rgb.r)/dif; 
    else if (rgb.b==max) hsv.hue=240.0+60.0*(rgb.r-rgb.g)/dif; 
    if (hsv.hue<0.0) hsv.hue+=360.0; 
    hsv.value=Math.round(max*100/255); 
    hsv.hue=Math.round(hsv.hue); 
    hsv.saturation=Math.round(hsv.saturation); 
    return hsv; 
}

function HSV2RGB(hsv) { 
    var rgb=new Object(); 
    if (hsv.saturation==0) { 
        rgb.r=rgb.g=rgb.b=Math.round(hsv.value*2.55); 
    } else { 
        hsv.hue/=60; 
        hsv.saturation/=100; 
        hsv.value/=100; 
        i=Math.floor(hsv.hue); 
        f=hsv.hue-i; 
        p=hsv.value*(1-hsv.saturation); 
        q=hsv.value*(1-hsv.saturation*f); 
        t=hsv.value*(1-hsv.saturation*(1-f)); 
        switch(i) { 
        case 0: rgb.r=hsv.value; rgb.g=t; rgb.b=p; break; 
        case 1: rgb.r=q; rgb.g=hsv.value; rgb.b=p; break; 
        case 2: rgb.r=p; rgb.g=hsv.value; rgb.b=t; break; 
        case 3: rgb.r=p; rgb.g=q; rgb.b=hsv.value; break; 
        case 4: rgb.r=t; rgb.g=p; rgb.b=hsv.value; break; 
        default: rgb.r=hsv.value; rgb.g=p; rgb.b=q; 
        } 
        rgb.r=Math.round(rgb.r*255); 
        rgb.g=Math.round(rgb.g*255); 
        rgb.b=Math.round(rgb.b*255); 
    } 
    return rgb; 
}

HSV选色法

使用HSV调色，相对于使用三原色调色，更接近人眼对颜色的直观认识。就是老师介绍的在photoshop上取色的办法:

第一步：在纯色板上，选择色[相]，确定H的取值
第二步：然后通过调节S和V的值，参考：S=V=100时，在圆锥的上边缘，得到纯色。纯色加白就是降低S，得到淡色。纯色加黑降低V，得到暗色。加入灰色，就是同时降S和V，得到浊色。

颜色和情感

色系	HSV圆锥位置	情感
明（淡）	顶面靠近圆心内侧	干净、柔和、清新、平静、柔软
暗	下端锥尖表面	脏、理性、保守
浊	圆锥体内部	沉重、阴沉、神秘
纯	顶面边缘	热情、活泼、轻浮、单纯
颜色	H参考值	情感
赤	0	热烈、喜庆、温暖、奋进、热情
橙	30	华美、丰硕、甜蜜、享乐
黄	60	高贵、庄重、光辉、温顺、光明
绿	120	生机、和平、凉爽、平静、希望
青	180	坚强、圆顺、冷清
蓝	240	广阔、清新、冷清、宁静、静寂
紫	300	深沉、稳重、神密
白	*	神圣、纯洁、素静、稚嫩
黑	*	神秘、悲哀、稳重、力度、死亡

色彩的冷暖

红色、橙色、黄色--为暖色。 绿色、蓝色、黑色--为冷色。 灰色、紫色、白色--为中间色； 冷色调的亮度越高--越偏暖， 暖色调的亮度越高--越偏冷 冷色后退，暖色前进

同色配色原则

同色配色做辅助，选取主色调，颜色不要太多。三种具体方法：徽标色（建立视觉识别体系），突出产品特性，考虑受众群体。

中间无色做协调，使用黑白灰降低对比和冲突

点缀强调微互补，少量的互补色，点缀，强调要突出的元素

极[色]配色原则

大面积的暗色背景，纯色前景。表达，时尚，前卫，现代，酷。

UI的基本组成元素

LOGO，位置在左上（最常见），或者顶部居中。注意不要太突出。

导航栏的形式：纯文本（注意装饰），按钮，图标。选中，不选中或鼠标焦点引起的状态变化： (1)背景变化(2)渐变方向变化（实际体现为凹凸效果）(3)发光（内光、高光或外光(4)三角指向（5）上划线或下划线（6）字体变化（颜色变化或大小变化）。

按钮：位置在右下角，文字说明言简意赅，尺寸合适，文字不要太满，和边框之间有空隙。（适应在很多地方都要考虑的透气原则）

设计师对视觉的引导

对先看什么后看什么的暗处引导

考虑自然的阅读顺序：从上到下，从左到右。

让一个元素突出醒目的方法：对比强烈的互补色，大小变化，吸引注意力的细节（如立体，光影）。

表明指向性的元素：箭头，连线。

图标的设计

设计风格：抽象、写实、3D、光影（多种风格可以混合）。水晶，半透明比较流行。

图标统一风格的办法：统一的边框、同样的装饰元素、一致的色调和统一的设计风格。前三个方法比较好把握。统一的设计风格需要一定的功力。

用户心理

考虑：情感、美学、体验、效果、乐趣、可用性、机动性、易用、合作

七个评价标准

适用性(useful)、可用性(usable)、渴望(desirable)、价值(valuable)、易查(findable)、可访问(accessible)、可靠（感觉应该是信任感）(crediable)

设计过程

考虑四个方面：内容、形式、功能和交互

关注两个属性：实际属性：可操作；娱乐属性：暗示、激励、识别

外部刺激

达到结果：吸引力、乐趣、令人满意

可选择性和超出预期的质疑

老师说：提高更多的选择性，能让用户感觉到满足感。

我的考虑：这个方法适合信息展现，并不适合应用系统。信息展现系统的可选择性很少，的确给用户提供可控制感会使亮点。但对应用系统，选择带来更多的复杂体验，更多的是选择带来的难度（如复杂的配置）。

老师的二八原则看角度也不同，一般人谈这个原则是抓住关键。她谈这个原则，关注的是超出预期。用户在我们的系统前， 是觉得功能太少， 还是太多呢，这要灵活根据实际情况而论。

智能化界面

角色担当方法：界面本身是用户的助手、秘书、伙伴和向导。 --但也应该注意保持沉默，不干扰用户，让用户获得控制感。

构图原则

黄金分割构图，主要元素位于大概1/3处。

对角线构图，无形的对角线

放射状构图，向外发散

三角形构图，正三角体现稳定

S行构图，曲线体现柔和

构图注意事项

对比：色彩对比，曲和直的对比，虚实的对比

联系：相邻区域的压叠，铆接相邻区域的小东西

平衡：左右平衡，补充小元件达到平衡（文字、图形）

破：在局部出现破坏一致性的小元素，打破整个画面的单调，常用方法是：出界。

指向性：视觉引导的箭头或线，本身应该不突出。

UI的两个常见框架

丁字型框架，正丁子，或倒丁字，两栏划分。左侧栏一般不超过整体宽带的1/4

同字型框架，三栏，左右相等比较窄，中间比较宽。

方案的设定

颜色方案：主色，配色原则

构图方案：

交互方案：交互形式、交互路径（我觉得应该是交互流程，交互路径指界面之间的切换，流程还关注一个界面中的交互过程）。

技术方案

关注细节

层次感，实现层次感的方法包括：虚实、颜色、曲直、压叠

视觉顺序：通过突出和引导

背景实用方法：标志剪切放大[法]、标志平铺法、抽象光影、几何图形（色块拼接）、具象图像（照片处理后）、文字机理、素底

趣味性：立体胜平面、图片胜文字、图表胜表格

提到的局部特效

充分使用高光，阴影，透明，3D，渐变等局部特殊效果。