《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
PSDhttp://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         

你可能感兴趣的:(UI设计)