ui设计师,规范

ui设计师,规范篇一：ui 设计规范命名规则 模块_类别_功能_状态.pngnav_button_search_导航_按钮_搜索_默认.png search 搜索 bg 背景 selected 按钮状态（选中） button 按钮 nav导航栏 disabled 按钮状态（不可点击） tab 菜单栏 icon 图标 default 按钮状态（默认） bg 背景 personal tada 个人资料 presses 按钮状态（按下） user 用户 pop 弹出 back 返回 refresh 刷新 delete 删除 eidt 编辑 image 图片 download 下载 content 内容 banner 广告 login 登陆 left right center左右中 registered 注册 title 标题 msg 提示信息 link 链接 note 注释 logo 标志 icon 制作： iOS120px：Icon_120 80px: Icon_small_40 58px: Icon_small 114px: Icon Android：36*36px：drawable-ldpi 48*48px：drawable-mdpi 72*72px：drawable-hdpi 96*96px：drawable-xhdpi Android 安卓系统 dp/sp/px换算 名称 分辨率 比率 rate（320px）比率rate（640px） idpi 240*320 mdpi 320*480 1 hdpi 480*800 xhdpi 720*800 xxhdpi1080*1920 Android 的图标尺寸 屏幕尺寸 启动图标 操作栏上下文 320*480px 48*48px 32*32px 16*16px 480*800px 480*854px 72*72px 48*48px 24*24px640*960px 720*1280px 48*48dp 32*32dp 16*16dp 1080*1920 144*144px 96*96px 48*48px 比率 rate（750px） 系统通知 最细笔画24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6px iPhone 图标尺寸 设备 AppStore 程序应用 状态栏 spotlight搜索标签栏(工具栏)导航栏 6p 1024*1024px180*180 54px 87*87 146（66）132 （160px） （物理 60px） 6 1024*1024px120*120 54px 58*58 98 （44）98 5 1024*1024px114*114 40px 58*58 98 （44） 98 4 1024*1024px114*114 40px 58*58 98 （44）98 3 515*512px 57*5720px 29*29 49 （44）44 （80px） 点击区域 点击区域大于 44pxretain屏幕大于 88px 字体大小 上的英文字体：HeiveticaNeue 中文：mac 下是 黑体-简 win 下 华文黑体 Ios 长文本 （可接受）26px（见小值）30px（舒适值）32px34px 双数 短文本 （可接受）28px（见小值）30px（舒适值）32px 注释 （可接受）24px（见小值）24px（舒适值）28px 手机上的字体：Droid sans fallback Android 高分辨率长文本 （可接受）21px（见小值）24px（舒适值）27px（480*800） 短文本 （可接受）21px（见小值）24px（舒适值）27px 注释 （可接受）18px（见小值）18px（舒适值）21px Android 低分辨率长文本 （可接受）14px（见小值）16px（舒适值）1820px（320*480） 短文本 （可接受）14px（见小值）14px（舒适值）18px 注释 （可接受）12px（见小值）12px（舒适值）1416px 篇二：UI 界面设计规范UI 设计(流程/界面)规范 一：UI 设计基本概念与流程 目的 规范公司 UI设计流程，使 UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使 UI设计的流程规范化，保证 UI设计流程的可操作性。 范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI 界面设计人员、界面评审人员和配置测试人员。 概述 UI 设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的 UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI 设计师应全面负责产品以用户体验为中心的 UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了 UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开 3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人 用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所） 。如何用（鼠标键盘/遥控器/触摸屏） 。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。 B、分析设计阶段 通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发： 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩，文字，图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。 D、方案改进阶段经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。 E、用户验证阶段 改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。 经过上面设计过程的描述，大家可以清楚的发现，界面 UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI 界面设计不存在美工。 2. UI 设计流程 概述 根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的 UI设计流程。每个产品（或项目）的生命周期中，UI 设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。 二：UI 界面用户体验设计原则与规范 1：应该遵循的基本原则 无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处： 1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解 2：降低培训、支持成本，支持人员不会行费力逐个指导。 3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加 做法： 项目组有经验人士，确立 UI规范： 美工提供色调配色方案，提供整体配色表 界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范： 控件功能遵循行业标准，windows 平台参见Microsoft 用户体验 控件样式在允许的范围内可以统一修改其样式、色调 参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。 根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的 界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。 建立合理化文档UI 标准描述上述规范， 强行界面设计者理解之，并作为开发准则，SQA 人员进行监控开发人员是否遵循，及时告诫开发人员。 2：(Color)颜色使用恰当，遵循对比原则： 1：统一色调，针对软件类型以及用户工作环境选择恰当色调： 如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等 2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表 3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等 4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试 5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。 6：整个界面色彩尽量少的使用类别不同的颜色 itop 色表 具体标准参考美术学统计学术标准。 色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。 篇三：UI 设计师必学的设计规范要做设计规范前，先来了解什么是设计规范，不是把所有组件都摆在同一张图上排排站吃果果就好，设计规范(Design Code / Design Specifications) 一文中提到： 设计规范是指对设计的具体技术要求，是设计工作的规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述，以及限制条件的技术描述等。 设计规范的层次 粗分成 3 个层面：公司、产品线、单一产品。包含视觉、品牌、用户体验等。 设计规范的目的 量化指标 确定一般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。 确认设计关键点 获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。它是一份检验文件，记录过程中的错误，留作以后的经验。并在此可以做出项目和产品设计的里程碑。 规范设计原则 这个原则有可能是针对单个项目的，也有可能是整个设计团队的指导原则，这个原则要被反复强调，反复实施，团队人员要共同为这个原则负责。 简单来说就是：告诉你这些组件可以怎么用、用在哪里、有什么样的限制、怎么验收。 以上取自 设计规范(Design Code / Design Specifications) 产品组成 产品的组成大约可以拆分成 页面 组件 元素 图(影片)、文字、icon、窗体、互动 等。各元素都可能需要制定 色彩、透明度、尺寸、间距、文件格式、质量、风格 等。 互动包含 手势操作、过场动画、特效、音效、震动 等。 先将各个产品拆到最小单位，再进行分类整理，通常就是那几种分类方式。参考现有的设计规范会更容易理解。别人家的设计规范 我又把 Google design guidelines (自备梯子)掏出来了，这份应该是目前最流行、写得详细的一份设计规范。可以从里面分析设计规范要包含哪些内容。 从左方的选单中可以看到这份文件包含：总览、动画、风格、布局、组合组件、图片、易用性、资源。点开后还有更详细的分类，之后才会是内文部份。每一个组件或元素都会包含 元素意义 使用规则、限制 运用场合、时机，与其原因 和同质元素间的一制性(新制规则) 组合运用 各种状态 平台差异性 正确示范、错误示范 元素意义 这个元素有什么的功能、对用户来说有什么帮助、呈现什么信息等等。 使用规则、限制，与其原因 要怎么使用这项元素、使用这项元素需要注意什么事情?为什么? 运用场合、时机 什么情况下会使用到这项元素?它会出现在什么地方? 和同质元素间的一致性(新制规则) 若现有同质元素不敷使用、需另制新款时，必须符合哪些规定以求风格一致?(如 icon) 组合运用 当元素和其他组件混合使用，会有什么限制?是否有特例情况? 各种状态 若元素会因操作或其他原因呈现不同样貌状况时，规则为何? 平台差异性 若产品发布于各种平台上，该元素是否会有不同的情况?正确示范、错误示范 除了正确示范外，将常见的错误一并标示可以降低出错虑、节省来回修改的时间。不仅只有文字之外，最好附上图片甚至动画说明。 制作文件