icon制作规范Word格式文档下载.docx

1、如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。b、分析设计阶段通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。c、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。调研阶段

2、需要从以下几个问题出发：用户对各套方案的第一印象用户对各套方案的综合印象用户对各套方案的单独评价选出最喜欢的选出其次喜欢的对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。d、方案改进阶段经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。e、用户验证阶段改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户

3、真正使用时的感想。为以后的升级版本积累经验资料。经过上面设计过程的描述，大家可以清楚的发现，界面ui设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。ui界面设计不存在美工。2.ui设计流程2.1概述根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的ui设计流程。每个产品（或项目）的生命周期中，ui设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。二：ui界面用户体验设计原则与规范1：应该遵循的基本原则无论是控件使用，提示信息措辞，还

4、是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解2：降低培训、支持成本，支持人员不会行费力逐个指导。3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加做法：项目组有经验人士，确立ui规范：美工提供色调配色方案，提供整体配色表界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：控件功能遵循行业标准，windows平台参见microsoft用户体验控件样式在允许的范围内可以统一修改其样式、色调参考其他软件先进操作，提取

5、对本项目有用的功能，以使用，绝对不能盲从，漫无目的。根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的界面实施人员与美工商榷控件可实现性,（如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱）。重复叠代上述工作。建立合理化文档ui标准描述上述规范，强行界面设计者理解之，并作为开发准则，sqa人员进行监控开发人员是否遵循，及时告诫开发人员。（color）颜色使用恰当，遵循对比原则：统一色调，针对软件类型以及用户工作环境选择恰当色调：如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等如果没有

6、自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，quot;!，着重号，以及图标等4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。6：整个界面色彩尽量少的使用类别不同的颜色itop色表具体标准

7、参考美术学统计学术标准。色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。篇二：web_ui_制作规范webui制作规范目录一、web目录结构规范.二、webui设计命名规范.2.1web界面设计最佳尺寸.2.2网站设计及基本框架结构.2.3命名规则注意几点.2.4常用命名汇总.三、webui图片命名规范.四、web基本框架布局规范.五、css样式书写规范及优化.5.1css文件命名规范.5.2常用类/id命名规范.5.3结构与样式分离.5.4文档的结构化书写.5.5注释书写规范.5.6css样式属性代码优化缩写.5.7css

8、各浏览器解决不兼容问题.六、其他规范.七、常用的一些工具.一、web目录结构规范：目录建立的原则：以最少的层次提供最清晰简便的访问结构。目录的命名以小写英文字母，下划线组成。根目录一般只存放index.htm以及其他必须的系统文件根目录下的images用于存放各页面都要使用的公用图片。所有js等脚本存放在根目录下的scripts或js目录所有css文件存放在根目录下style或css目录多语言版本存放于独立的目录。例如：简体中文存放在cn目录下，繁体中文存放在tw目录下，英文存放在en目录下等。所有flash,avi,ram,quicktime等多媒体文件存放在根目录下的media目录下。二、

9、webui设计命名规范：2.1web界面设计最佳尺寸960网格系统web界面设计最佳尺寸目前绝大多数显示器都支持1024x768及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。2.2网站设计及基本框架结构container“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“,“wrap“,“page“.header“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header”（

10、或pageheader）.navbar“navbar“等同于横向的导航栏，是最典型的网页元素。“nav”,“navigation”,“nav-wrapper”.menu“menu”区域包含一般的链接和菜单，这部分还可以命名为:“subnav“,“links“，“sidebar-main”.main“main”是网站的主要区域，如果是博客的话它将包含的日志。“content“,“main-content”（或“maincontent”）。sidebar“sidebar”部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等这部分还可以命名为:“subnav“,“side-p

11、anel“,“secondary-content“.Footer“Footer”包含网站的一些附加信息，这部分还可以命名为:“copyright“2.3命名规则注意几点尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.如:red/left/big等。组合命名规则:元素类型-元素作用/内容搜索按钮:btn-search、登录表单:form-login、新闻列表:list-news。涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover点击：click已浏览：visitedbtn-search

12、、btn-search-hover、btn-search-visited2.4常用命名汇总篇三：app图标尺寸在iphone960pxx640px分辨率中图标显示尺寸114pxx114px20像素的圆角4像素的90度黑色投影2像素的90度白色内投影默认自带的高光在iphone480pxx320px分辨率中图标显示尺寸57pxx57px10像素的圆角2像素的90度黑色投影1像素的90度白色内投影默认自带的高光在ipad1024pxx768px分辨率中图标显示尺寸72pxx72px13像素的圆角android屏幕图标尺寸规范android屏幕图标尺寸规范1.程序启动图标：ldpi（120dpi）小

13、屏mdpi（160dpi）中屏hdpi（240dpi）大屏xhdpi（320dpi）特大屏36x36px48x48px72x72px96x96px2.底部菜单图标1.大屏:1.完整图片（红色）:72x72px2.图标（蓝色）:48x48px3.图标外边框（粉色）:44x44px1.中屏:1.完整图片:2.图标:32x32px3.图标外边框:30x30px1.小屏:36x36px24x24px22x22px3.弹出对话框顶部图标lowdensityscreen（ldpi）小屏mediumdensityscreen（mdpi）中屏highdensityscreen（hdpi）大屏24x24px32x32px4.长列表内部列表项图标lowdensityscreen（ldpi）小屏5.底部或顶部tab标签图标1.大屏（hdpi）screens:42x42px1.中屏（mdpi）screens:28x28px1.小屏（ldpi）screens:6.底部状态栏图标xhdpi（320dpi）特大屏18x18px24x24px36x36px48x48px