ui设计规范
『壹』 手机UI设计的基本规范
目前移动设计在我们的工作中越来越重要,除了掌握基本的UI设计技能之外,我们也要对移动互联网的特征有所认识。为了能在交互设计和用户体验上做出比竞品更优秀的移动APP产品,我们必须知道移动设计的基本原则。
之前25学堂有跟大家说到移动APP客户端的UI设计原则及UI界面适配步骤,还有APP触控操作设计原则之触控目标的尺寸大小。
从移动互联网特征的角度来看,移动设计的基本八条原则
[图片上传中...(image-501af8-1523091320600-7)]
1、内容优先 ,合理的布局
对于手机而言,屏幕空间资源显得非常珍贵,为了提升屏幕空间的利用率,界面布局应以内容为核心,而提供符合用户期望的内容是移动应用获得成功的关键。如何设计和组织内容,使用户能快速理解移动应用所提供的内容,使内容真正有意义,这是非常关键的。
(1)充足内容,使内容符合移动的特征。
(2)优先突出用户需要的信息,而简化页面的导航。
(3)适时提升屏幕空间的利用率。
2、是为移动触摸而设计
点击操作是PC时代交互的基础,在触摸屏设备上基于手指的手势操作已经代替了鼠标的点击操作。
(1)以信息架构为基础,简历手势交互规范。
(2)优先设计自然的手势交互,而不是TAP点击
(3)引导用户在情境中学习手势操作。
(4)特殊手势不是必须的。
(5)可触区域必须大于7×7mm,尽量大于9×9mm。
(6)手势操作需要提供过程及反馈演示。
3、输入方式的 转换
文字输入是移动端的软肋之一,不管是手写输入还是键盘输入,操作效率都相对较低。在行走或者单手操作时,输入的出错率也比较高。
(1)减少文本输入,转化输入形式。
(2)简化输入选项,变填空为选择。
(3)使用手机已有的传感器输入。
4、操作流程必须确保流畅性
在移动产品的操作过程中会碰到多种多样的情况——找不到目标、不知道该怎么操作、操作后没有及时反馈,等等,这都会对产品的流畅性造成影响。在移动产品的设计中主要从三个方面来考虑产品的流畅性:
(1)手指及手势的操作流。
(2)用户的注意流。
(3)转场流畅或者自然,不能牵强!
『贰』 UI设计规范都有哪些
好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。
1.简易性
界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。
2.用户语言
界面中要使用能反映用户本身的语言,而不是游戏设计者的语言。
3.记忆负担最小化
人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。
4.一致性
它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。
5.清楚
在视觉效果上便于理解和使用。
6.用户的熟悉程度
用户可通过已掌握的知识来使用界面,但不应超出一般常识。
7.从用户习惯考虑
想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。
通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。
8.排列
一个有序的界面[1] 能让用户轻松的使用。
9.安全性
用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。
10.灵活性
简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。
11.人性化
高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。
12.颜色不一样
UI设计师是随着网络而兴起的新兴设计行业,从事对软件的人机交互、操作逻辑、界面美观的整体设计工作
涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及跨媒介设计以人为本,以用户体验需求为基础,发展多元化是目前中国信息产业中最为抢手的人才之一。
『叁』 UI设计规范说明书
高质量的规范文档是一个优秀设计系统的代表物。我们详实地描述每个 UI 组件的设计与代码规范,来帮助设计师高效地作出决策,推动开发速度。编写高质量的文档需要前期规划和一系列合理的流程来辅助,付出的成本相当高。
这个系列由六篇文章组成,致力于描述编写组件规范文档的过程。本篇我会从目标读者、文档内容、文档结构开始。然后会涉及案例,设计与代码指南。这些内容来自于我自己这些年的实践经验以及社区里大家所分享的知识。
那么我以一个问题开始今天的主题:文档的目标读者是谁,他们需要什么样的内容,作为编写者我们该怎样组织文档结构来作出清晰的表达?
文档的目标读者
首先:你要弄清楚谁是你的文档的主要读者。
工程师,设计师,还有公司里的所有人!
当一个设计系统包含了代码指南,工程师们显然会是读者。那么一个只包含了代码指南的设计系统应该服务于设计师吗?如果文档里只包含了设计规范而没有代码(如 Material Design),工程师还是读者吗?
在我看来,两个问题的答案都是肯定的。规范文档是从不同的角度来服务于多种角色的。
除了设计与工程,它还服务于其他人吗?很有可能,特别是当文档所在的设计系统已经成为产品的基石时。简短有效的介绍对于 PM(产品经理) 很有价值,QA(测试) 则比较关注案例部分…等等。
Morningstar Design System 在文档页面右侧设计了一个两级的定位导航栏
Takeaway:不论选择哪种形式,最重要的是在整个系统中保持逻辑一致,符合读者的预期与心理模型。
展示设计?展示代码?还是都展示?
把设计和代码融合,就会有读者只对其中一个方面感兴趣,他们会提出自己的意见:
设计负责人可能会问到:我能把这些代码案例和指南隐藏掉嘛?
工程师可能会问:我能把这些和设计规范有关的文字隐藏掉嘛?
可以考虑加一个选项或按钮来允许隐藏设计/代码内容。比如:
Design Only:把代码指南、代码片段和属性表等等都隐藏起来
Code Only:把视觉样式指南和文案指南都隐藏,但还是要把一部分交互用法指南保留着,这对工程师们也有用。
『肆』 UI设计规范几时做呢
在团队定位清晰的时候做,不宜太晚和太早,建议用蓝湖创建设计规范,效率高。
『伍』 UI设计有哪些规范
智能设备的普及使得界面设计工作被重视起来,,其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要卖点,一个产品拥有美观的界面会给人带来舒适的视觉享受,拉近人与商品的距离,是建立在科学性之上的艺术设计,那么,UI设计的规范标准有哪些呢?
一、轴
轴在UI设计中是最基本、最常见的概念,也是用来组织界面结构的重要核心。简单说来,轴是在设计的时候组织一系列元素的假象线,在下面的设计图中,轴以虚线的方式被标注出来。
1、对齐轴最常见于对称元素的使用,当元素被布置成轴对称的布局的时候,会给人有序感。就像生活中绝大多数的事情一样,我们更倾向于享受有序的的东西,它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes程序中的专辑列表的设计,所有的专辑列表在界面的左侧保持对齐,围绕虚线轴轴对称。
2、强化虽然轴是一条假想的线,但是如果周围的元素的边缘控制得足够整齐,这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴,如果一边有建筑一边没有,那么这种轴线的感觉不会那么强烈。从产品设计的角度上来看,Twitter的时间线设计就是一个很好的案例,左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。3、运动当我们碰到某先线条的时候,视觉会很自然地沿着这些方向运动,就如同我们站在街上,会自觉地沿着街道的两头走动。两个端点决定了线,界定了开始和结束的地方,线或者说轴线的存在会引导和提示运动的方向。SoundCloud中,音轨沿着一条既定的水平轴线运动,随着音乐的播放,音轨自然地自左向右匀速运动(具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍)。
4、连续性如果终点是不确定的,那么你通常会沿着轴线的方向浏览/运动,直到你找到感兴趣的东西,或者感到厌倦并关闭应用。在建筑学中,未清楚界定的终点非常少见,因为建筑的修建通常没法永远持续下去,但是UI设计则不一样,无限地滚动下去是无比受欢迎的设计手法。Pinterest的APP中就是这样做的,持续不断的图片沿着中轴线的方向持续不断地滚动下去,只要你有兴趣一直观看下去。
二、对称
当元素被均匀地放置在轴线的两侧之时,他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时,它们就形成了完美对称。
1、平衡对称令整个设计更加平衡,当元素与控件在轴线两侧处于相同位置之时,会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候,如果左右两侧都是5间大小一致的房子,当你走在街上的时候这种平衡的设计会令人非常舒适,这是平衡给人的感受。Rdio的APP设计就遵循着这样的设计规则,屏幕两侧的控件是相同的规格,这类布局很适宜阅读,用户会自觉地自上到下,从左向右查看。
2、不对称如果轴线两侧的控件布置不再是一一对应尺寸相近,那就是不对称的设计,不对称的设计会给人明显的失衡感,可能会令人不舒服,但是也能造就残缺美,当然这要看你具体怎么做。虽然Pinteret的APP设计在整体上是沿着中轴线对称的(宽度一致),但是两边的界面控件并非是对称的,它们的高度并不一致,位置也是错落的,稍微一点的落差都会被眼睛捕捉到,而这样的差异让用户无法准确地左右顺序阅读,不对称设计打破了设计的平衡性和舒适性,但是也可以缓解了规律性设计带来的视觉疲劳。
三、层级
当某个元素出现在比其他元素更重要的位置的时候,层级就出现了。
1、尺寸如果一个设计元素在尺寸上比其他的控件更大,就会区分出层级。毫无疑问,我们查看某个设计的时候,通常会被最大的元素吸引到。如果一个建筑物有5个出窗户,其中一个是其他四个的两倍大,我们的注意力自然而然会被吸引过去。通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket,顶部的轮播文章拥有更大的图片,它的位置和尺寸会令我们一眼注意到(具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍)。
2、形状如果一个控件在形状和形态上同其他的不一样,也可以让它独立出一个层级,不规则的设计同样会令人侧目,建筑物的正面拥有五个相同的窗户和一闪大门,你会立刻注意到门的独特之处。在Instagram的个人信息页中,圆形的个人头像在方形的图片中别具一格,非常抓人眼球。它会让人意识到,这个独特的东西,更为重要。
3、位置位置的存在同样能彰显层级的不一样,在圆圈之内,中心位置的东西比边缘部分的看起来更重要,位于轴线顶端的控件会显得比其他部分的优先级更高。以设计应用Path的设计为例,时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要,而这个地方正好展示的也是用户头像。
四、韵律
UI设计和建筑设计同样有着韵律之美,重复的模式会营造出独特的节奏之美。
1、模式理解韵律最直接的方式就是听歌,音乐拥有节奏感,绝大多数的音乐遵循着相同的节拍,节拍就是音乐模式的一部分。这方面最典型的APP是Airbnb,APP列表中每一间房子都占据一个模块,模块中有着大小相同的图片,价格、位置和房东信息和图片的相对位置一定,且排版匀称舒服,两个模块之间的间距也相同,当你浏览的时候,熟悉的节奏会让你清楚地知道上哪看关键信息。
2、间断当节奏被间隔打断的时候,会形成不同的层级,听歌的时候,均匀的节奏被其他的音乐元素打断的时候,你会意识到这是比较特别的部分。在Twitter的APP中,推文和推文保持着相同的样式,均匀的节奏,但是其中的“推荐用户”一项有着不同的样式,它插入到推文列表中,打破了整个信息流的节奏,凸显出不同的层级,会很快抓住你的注意力。
『陆』 ui设计规范文档怎么写
ui设计规范;ui设计规范有哪些?这个问题对于ui设计师来说应该是比较关心的吧,因为作为ui设计师,ui整理设计规范也是设计能力的一种体现。所以,无论是自己设计创作还是推动产品开发,你的设计规范是否完善,对产品的质量起着决定性的关键作用。那么我们今天就来聊聊这个问题吧!
ui设计规范,ui设计规范有哪些?这个问题介绍到这里就介绍完了,现在你清楚ui设计了吗?设计规范对整个项目的规范性推动很强大,但是需要花时间和耐心细心打磨,所以需要花费很多时间和精力去整理资料、编辑素材、分类整合,最后还要在设计软件中将整个规范重新排列设计。如果你还有其他关于ui设计的问题欢迎持续关注易夏岚或者与我进行交流~
『柒』 UI界面设计规范有哪些
一、字体
iOS的字体:
中文字体:苹方 / PingFang SC
CSS:Font-Family:PingFang SC
英文、数字:Helvetial
Andioid的字体:
中文字体:思源黑体 / Noto Sans Han
英文、数字:Roboto
二、规范
1、iPhone界面尺寸
三:小结
iPhone的主流设计尺寸:750x1334 px
1242x2208 px
Andioid的主流设计尺寸:720x1280 px
1080x1920 px
『捌』 UI设计规范有什么用给谁看
UI设计不仅是让某个APP或软件有个性有品位,吸引用户,还有一个是操作舒适、简单、突出软件的定位和特点,蓝湖的设计规范云可以尝试一下
『玖』 为什么UI设计规范很重要
以下三点原因:
保证平台统一性
统一性是交互设计的一个基本原则,在一个长期迭版代多人合作的项权目中,不同的设计师会负责不同的模块,每个人都有各自的思路,就有可能会对相同的元素做出了不同的方案,对于用户来说容易造成困惑,对品牌整体形象的建设也没有好处。所以对于较大型的产品,最好有设计规范来定义基本的元素,帮助众多设计师一起做出有统一性的产品。
2.提升团队工作效率
对于同一个基本元素,如果没有设计规范,交互设计师需要设计一次交互方式,视觉设计师需要设计一次外形,UI开发同学需要开发一次,每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范,只需设计一次,团队中任何一个设计师需要用的时候直接拿来用就可以了,也不需要再进行视觉和开发,极大的提升了效率。
3.打磨细节体验
在整理每个元素的规范时,设计师都需要对其场景、状态考虑清楚。在整理的过程中,经常会发现一些以前没注意到的问题,并进行优化。把一个小元素单独拎出来仔细考量,写成一篇完整规范的过程,其实就是在打磨细节的过程。
『拾』 UI设计网页设计字体规范应该要注意什么
可以参考常规字体的使用规范:
1、在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。
2、不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。
3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配,等。
(10)ui设计规范扩展阅读:
网页设计
1、需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析,从而建立起营销模型。
2、以业务目标为中心进行功能策划,制作出栏目结构关系图。
3、以满足用户体验设计为目标,使用axure rp或同类软件进行页面策划,制作出交互用例。
4、以页面精美化设计为目标,使用PS、AI等软件,调整,使用更合理的颜色、字体、图片、样式进行页面设计美化。
5、根据用户反馈,进行页面设计调整,以达到最优效果。