ui设计规范怎么写

ui 设计规范怎么写篇一：UI 设计尺寸规范-最新最全 UI 设计规范iPhone 界面尺寸 iPhone 图标尺寸： iPad 的设计尺寸 官网 官网 Android 的图标尺寸 Android 安卓系统 dp/sp/px 换算表 主流 Android 手机分辨率和尺寸篇二：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 设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。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 色表 具体标准参考美术学统计学术标准。 色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。 3：(Resource)资源 一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。 1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考 itop 的 outlookbar 图标设计标准 2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格 3：底图应该融于底图，使用浅色, 低对比，尽量少的使用颜色。 4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。 5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有 4 种不同的样子。 篇三：UI 设计规范界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。 目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。 1：易用性： 按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1):完成相同或相近功能的按钮用 Frame 框起来，常用按钮要支持快捷方式。 2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 3):按功能将界面划分局域块，用 Frame 框括起来,并要有功能说明或标题。 4):界面要支持键盘自动浏览按钮功能，即按 Tab 键的自动切换功能。 5):界面上首先应输入的和重要信息的控件在 Tab 顺序中应当靠前,位置也应放在窗口上较醒目的位置。 6):同一界面上的控件数最好不要超过 10 个，多于 10个时可以考虑使用分页界面显示。 7):分页界面要支持在页面间的快捷切换，常用组合快捷键 Ctrl+Tab 8):默认按钮要支持 Enter 及选操作，即按 Enter 后自动执行默认按钮对应操作。 9):可写控件检测到非法输入后应给出说明并能自动获得焦点。 10):Tab 键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。 11):复选框和选项框按选择几率的高底而先后排列。 12):复选框和选项框要有默认选项，并支持 Tab 选择。13):选项数相同时多用选项框而不用下拉列表框。 14):界面空间较小时使用下拉框而不用选项框。 15):选项数叫少时使用选项框，相反使用下拉列表框。16):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 2： 规范性：通常界面设计都按 Windows 界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。规范性细则： 1):常用菜单要有命令快捷方式。 2):完成相同或相近功能的菜单用横线隔开放在同一位置。 3):菜单前的图标能直观的代表要完成的操作。 4):菜单深度一般要求最多控制在三层以内。 5):工具栏要求可以根据用户的要求自己选择定制。 6):相同或相近功能的工具栏放在一起。 7):工具栏中的每一个按钮要有及时提示信息。 8):一条工具栏的长度最长不能超出屏幕宽度。 9): 工具栏的图标能直观的代表要完成的操作。 10):系统常用的工具栏设置默认放置位置。 11):工具栏太多时可以考虑使用工具厢。 12):工具厢要具有可增减性，由用户自己根据需求定制。 13):工具厢的默认总宽度不要超过屏幕宽度的 1/5。 14): 状态条要能显示用户切实需要的信息，常用的有： 目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。 15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。 16)：状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。 17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。 18)：菜单和状态条中通常使用 5 号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。 19):右键快捷菜单采用与菜单相同的准则。 3：帮助设施： 系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。 帮助设施细则： 1)：帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明，让人困惑)。 2)：打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。 3)：操作时要提供及时调用系统帮助的功能。常用F1。 4)：在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。 5)：最好提供目前流行的联机帮助格式或 HTML 帮助格式。 6)：用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。 7)：如果没有提供书面的帮助文档的话，最好有打印帮助的功能。 8 )：在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。 4：合理性： 屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。 合理性细则： 1)：父窗体或主窗体的中心位置应该在对角线焦点附近。 2)：子窗体位置应该在主窗体的左上角或正中。 3)：多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。 4)：重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。 5)：错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。 6)：与正在进行的操作无关的按钮应该加以屏蔽(Windows 中用灰色显示，没法使用该按钮)。 7)：对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。 8)：非法的输入或操作应有足够的提示说明。 9): 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。 10):提示、警告、或错误说明应该清楚、明了、恰当。5：美观与协调性： 界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。美观与协调性细则： 1): 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。 2): 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。 3): 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。 4): 按钮的大小要与界面的大小和空间要协调。 5): 避免空旷的界面上放置很大的按钮。 6)：放置完控件后界面不应有很大的空缺位置。 7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体 9-12 较为美观，很少使用超过 12 号的字体。8): 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用 Windows界面色调。 9): 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。 10): 大型系统常用的主色有“#E1E1E1“、“#EFEFEF“、“#C0C0C0“等。 11): 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。 12):