《UI进化论》笔记

交互概念设计与图形界面设计网站：http://list.youku.com/albumlist/show?id=3414545&ascending=1&page=1

书籍：计算机图形学、产品策划与分析、现象分析技术、数据筛选技术、工程心理学

交互设计的基本原则：

1.提供有效的达到用户目的的功能

2.功能完成的速度非常快

3.操作简单、直观、图形化

4.预置状态和备选功能都服务于主要任务目标

交互设计应该理解：

1.勇于抛弃不需要的累赘功能

2.如果你认为你的用户需要更多的功能，那么那些人往往不是你的用户

3.针对性的设计比普通无效的设计更有效

4.交互设计的改进空间就在你身边、而不是在实验室

必备软件：

Photoshop CS

Illustrator CS：渐变网格、色彩遮罩、字符处理工具、橡皮檫工具、SVG

ICONCOOL Studio v2.8:图标设计工具

JPEG Optimizer:JPG图片压缩工具

交互设计和界面设计流程：

用户需求分析（可从竞争方式获得、网上调查、查看各种资料）、确定产品设计概念、候选方案设计、原型设计、用户测试与评估

研究用户行为：1.它是什么产品2.看上去如何3.解决什么问题4.其他心理需求

视觉设计的要点：

1.可见性，不论白天还是晚上，操作界面都要看的到

2.可识别性：（颜色的选取，不同颜色带便这不同的人、不同的文化）

3.美观

4.提示，引导，提示当前信息的可用性与反馈

怎样培养自己的美感以及锻炼自己的创意:

1.      参加美术馆2.逛就市场3.拍摄有趣的才智和颜色4.留心街边的艺术5.看多点电影海报(观察如何排版,锻炼排版能力,欣赏多一点外国网站的排版

2.      (一)国内优秀素材资源网址:
站酷网http://www.zcool.com.cn推荐
素材中国http://www.sccnn.com推荐
酷素材http://www.coolsc.com推荐
站长站素材http://sc.chinaz.com
韩国设计网http://www.krwz.com
设客素材网http://www.vicnc.com
奇爱素材网http://www.72sc.com
搜PSD网http://sopsd.com推荐
好素材网http://www.haosc.cn
丁丁家园http://www.citk.net
顶尖设计http://www.bobd.cn
大师之路http://99ut.blueidea.com
设计家园http://www.dwww.cn
昵图网http://www.nipic.com
999素材网http://www.999fww.cn推荐
以下也是^_^
http://www.psd.cn推荐
http://www.iecool.com推荐
http://www.wzfzl.com.cn
http://www.shiliang.net
http://www.sj33.cn
http://www.333cn.com
http://www.ew88.net/
http://www.sucai.com/推荐
http://www.photoshop.org.cn/
http://www.cnwebshow.com
http://sc.52design.com
http://www.91tuku.net
http://www.mysucaiku.com
http://www.twocity.cn
http://www.sucai.net/推荐
http://www.sucaiz.com/
http://www.sucaitianxia.com
http://www.sucaiw.com/
http://sc.68design.net
http://www.bittbox.com
http://www.veeqi.com
http://www.yiyacn.com
http://www.jscode.cn
http://www.028wa.com
http://www.mb263.com
http://www.tp9999.com
http://www.tot.name
http://www.3lian.com
http://www.han123.net
http://www.tp9999.com
http://www.52sucai.com.cn/
http://www.jianjie8.com
http://www.sccooo.com

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
(二)国外优秀素材资源网址:
http://qvectors.com/推荐
http://www.officialpsds.com推荐
http://www.veryicon.com
http://coolvectors.com
http://www.free4photoshop.com推荐
http://www.freephotoshop.org
http://www.photoshopfiles.com/
http://www.officialpsds.com/
http://www.designbum.net
http://www.freepsd.com/
http://www.leafweb.cn
http://www.fordesigner.com
http://www.downloadpsd.com
http://lordofdesign.com/
http://www.psdprotocol.com
http://www.psdvault.com
http://www.cgtextures.com
http://www.photoshopstar.com
http://www.toptut.com
http://naldzgraphics.com/
http://psdtuts.com/
http://www.tutorial9.net
http://abduzeedo.com/
http://vector4free.com
http://pshero.com
http://frnak.deviantart.com/
http://dezignus.com
http://www.freevectors.net/
http://www.youthedesigner.com/
http://www.smashingmagazine.com/
http://www.bittbox.com/推荐
http://www.gomediazine.com/
http://photoshopcandy.com/
http://www.photoshopcafe.com/
http://www.freephotoclips.com/
http://www.psdspy.com/
http://www.dennisplucinik.com/
http://www.ganato.com/
http://www.psdprotocol.com
http://photoshopit.wordpress.com/
http://www.thefreelogomakers.com
http://www.alterform.com
http://logopond.com

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
(三)图片空间网站
http://www.imagesite.cn/
http://www.tupianz.com
http://www.99space.com
http://www.tucoo.net
http://www.tuku.com.cn
http://www.91tuku.net
http://www.thefirst.cn
http://www.pclady.com.cn
http://www.imagewa.com
http://www.smzy.com

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
(四)免费下载3D模型的网站
http://www.3dcool.net/
http://www.3dmo.com/
http://www.3dfrom.com/
http://www.3dmaxmx.cn/
http://www.3dtotal.com/
http://www.turbosquid.com
http://www.greatbuildings.com/
http://archive3d.net/
http://sketchup.google.com
http://www.3dmodelfree.com/
http://www.3dxtras.com
http://dlegend.com
http://artist-3d.com/
http://www.nasa.gov
http://www.3dm3.com
http://www.amazing3d.com/
http://3ddb.blogspot.com
http://www.dewantoro.net/
http://cg-india.com
http://www.exchange3d.com/
http://www.corporatemedianews.com
http://www.wirecase.com
http://www.adobe-tools.com/
http://www.mr-cad.com
http://3dp2.0catch.com/
http://www.sharecg.com
http://www.3delicious.net/
http://www.archibase.net
http://www.top3dmodels.com
http://www.oyonale.com/
http://www.top3d.net

>>>>>>>>>>>>>>>>>>>>>>>>>>>
(五) photoshop教程网
http://www.pconline.com.cn
http://www.wzsky.net
http://www.68ps.com
http://www.52photoshop.com
http://www.enet.com.cn
http://tech.163.com
http://www.grafpedia.com/
http://psdfan.com
http://photoshoptutorials.ws
http://www.psbrushes.net/
http://www.phototutorial.info
http://bestphotoshoptutorials.net/
http://www.52css.com/
http://www.99265.com

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
(六)设计网站
http://www.hxsd.com/火星时代
ttp://www.333cn.com/中国设计之窗

http://www.cndesign.com/中国设计网

http://www.68design.net/设计网联盟

http://shishang.chda.net/设计艺术家网

http://www.china-designer.com/index.asp中国室内设计师网

http://www.dolcn.com/设计在线

http://www.cndu.cn/设计联盟

http://www.a1988.com/中国服装设计网
http://www.abcdown.net/ abc学院
http://www.yyyyi.com/设计坊

http://www.ednchina.com/电子工程师的设计灵感之源
http://www.photoshopcn.com/

http://www.52sheji.com/tuxing/HTML/1220.html

http://www.enet.com.cn/eschool/includes/zhuanti/ps/硅谷动力

http://yoka.chinadaily.com.cn/fashion/edittj/index.shtml环球在线

http://www.foreweb.com/网页制作教程网

http://www.100ps.cn/

http://www.cgfinal.com/终极CG

http://www.itzx1.com/IT设计在线
字体下载之家http://www.homefont.cn/
中国下载站字体下载http://font.chinadownz.com/CnFont/
字体下载大宝库http://font.knowsky.com/
找字网http://www.zhaozi.cn/

UCDChina UI类原创BLOG聚合

图标的注意事项：

1.      外形（照相机和摄像机要区分开）

2.      材料（我们几乎不使用玻璃材质的垃圾桶）

3.      角度（看得出来这是个什么，文件夹用侧面变现就比用正面表现容易理解）

4.      大小比例（笔应该不能比文件夹的还大）

5.      色彩地球表面没有大面积的红色

6.      设计之初要考虑到图标在不同分辨率下的应用效果

7.      风格要统一/整体性要强

8.      传达含义清晰、准确、容易记忆

9.      有一定的主题文化

国外知名图标设计作品：

http://www.artua.com/

http://iconka.com

http://www.softfacade.com/

http://dlanham.com/

http://www.laksman.com.ar/

http://turbomilk.com/

http://www.hybridworks.jp/

设计的图标都要保持在64px*64Px~96px*96px之间要考虑

字体不要小于14px（中文）和12Px(英文)

尽量使用安全色域内的颜色，并且少用对比色的渐变设计

图标设计的步骤：

1．  确定突变的主题和元素关系（它需要反映什么含义，什么文化内涵，

2．  初步形状，布光，材质（在渲染过程中，他是表面各可视属性的结合，表面的色彩，纹理，光滑度，透明度，反射率，折射率，发光度

优秀的设计网站。

www.dlanham.com   （Kiro的偶像的个人网站），www.fullyillustrated.com，www.raconde.com，www.genoco.com，www.goodbyebrand.com

优秀的设计团队：

http://www.uiplus.cn/index.php/Index/caseShow/type/0

http://www.wearedo.com/

手持设备的图形界面：

1、  界面清晰，简明的解释功能

2、  界面尺寸的趋势

3、  风格一致

4、  产品案件的字体应与界面出现的字体一致

5、  产品的颜色和界面的颜色需要有一定的联系

所经过的过程：

1、  产品的定义

  一款什么样的软件，具有什么样的功能

2、  交互设计

      具体的功能的使用步骤，所要涉及的技术

3、  界面原型

         留出默认的title bar顶部状态栏（信号、未接来电）和softkey底部操作栏当前的操作按钮

        按照交互设计的逻辑重要性布局界面

        需要对各部分的比例尺寸进行定义

4、  色彩设定

  主色‘辅助色、操作色

5、  绘制界面细节

描绘状态栏和操作栏，放入自己的做的图标（常用的主菜单布局：矩阵式、环绕式、列表、标签、循环等）

进入二级菜单：状态栏要变成当前界面提示的重要因素，可以通过左右切换改变当    前的位置

             二级菜单栏以列表的形式显示功能，那么就会出现滚动条（制作要点：当前显示的选项如果存在翻页的情况，最后一行的文字最好只显示上半部分，以提醒用户下面还有内容

             选择某项功能后，必须出现反馈，因此需要设置一个风格化背景即是选中条

图标设计:大图标的尺寸、小图标的尺寸、格式（BMP、JPG、GIF、PNG）色深（16Bit）分辨率（96dpi）

图标要求：图标色彩和外观一致性

         图标的可用性、识别性

重要按钮的尺寸不小于35px*35px