欢迎来到个人简历网!永久域名:gerenjianli.cn (个人简历全拼+cn)
当前位置:首页 > 范文大全 > 实用文>UI规范&UI指南&UI组件交互设计

UI规范&UI指南&UI组件交互设计

2022-11-25 08:38:39 收藏本文 下载本文

“不会取名字”通过精心收集,向本站投稿了10篇UI规范&UI指南&UI组件交互设计,这里小编给大家分享一些UI规范&UI指南&UI组件交互设计,方便大家学习。

UI规范&UI指南&UI组件交互设计

篇1:UI界面设计需要遵循哪些规范?

一:遵循一致的准则,确立标准并遵循

无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致,这样得到的好处:

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解

2:降低培训、支持成本,支持人员不会行费力逐个指导。

3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

做法:

项目组有经验人士,确立UI规范:

·美工提供色调配色方案,提供整体配色表

·界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范:

控件功能遵循行业标准,windows平台参见《Microsoft用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。

根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的

·界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。

·建立合理化文档《UI标准》描述上述规范,

·强行界面设计者理解之,并作为开发准则,

·SQA人员进行监控开发人员是否遵循,及时告诫开发人员。

二:(Color)颜色使用恰当,遵循对比原则:

1:统一色调,针对软件类型以及用户工作环境选择恰当色调:

如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等

2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表

3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,?quot;!,?着重号,以及图标等

4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试

5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。6:整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

三:(Resource)资源

一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准

2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格

3:底图应该融于底图,使用浅色,低对比,尽量少的使用颜色。

4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。

5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。

如:《如何创建XP图标》www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp

附件:Itopoutlookhowto.doc描述itop项目中,outlookxp风格图标的制作方法

四:(Font)字体

使用统一字体,字体标准的选择依据操作系统类型决定。

中文采用标准字体,“宋体”,英文采用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来,例如MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况

ITop采用BCB,所有控件默认使用parentfont,不允许修改,这样有利于统一调整。

·系统大小字体属性改变的处理。

Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题。

这个情况下,应该做相应处理:

1:写程序自动调节大小,点阵值乘以一个相应比例

2:全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。

五:(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则:

1:口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字

2:断句逗号句号顿号分号的用法,提示信息比较多的话,应该分段,

3:警告、信息、错误使用对应的表示方法

4:使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

5:根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为儿童:这可以语气亲切和蔼,老年用户则应该成熟稳重。制定标准遵循之。

六:(STYLE)控件风格,不要使用错误控件,控件功能要专一

有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章

·不要错误使用控件,例如:

使用Button样式做TTable的功能,拿主菜单条显示版权信息,

·统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映

·一个控件只做单一功能,不复用

很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这些对用户初次理解增加难度,只有用户熟悉后才能理解。例如

改变红色选项,左边的参数代表不同的设置,可能由于为了节省控件或者编程量,但是只有熟练用户才回使用,这种情况下解决方法:

1:分组,使用双份控件.

2:使用TABLE页,给用户很明显的视觉变化

七:(ALIGN)控件布局,窗口不拥挤,按功能组合控件

1:屏幕不能拥挤

拥挤的屏幕让人难以理解,因而难以使用,

试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。

让人看上去,不能太拥挤,也不能太松散。

整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。

2:区域排列

一行控件,纵向中对齐,控件间距基本保持一致

行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。

当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。

3:数据对齐要适当

说明文字,中文版应使用中文全角冒号,纵向对齐时,并按冒号右对其,如图。纵向控件宽度尽量保持相通。并左对齐。

例如金额等字符穿应根据小数点对齐,或者右对齐

4:有效组合

逻辑上相关联的控件应当加以组合,以表示其关联性,反之,任何不想光的项目应当风格开,在项目集合间,用间隔对其进行分组,或者使用方框划分各自区域。

例如:以下界面,选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围,和入帐方式无关,

则应该修改为:搜索方式和入帐方式调换位置。以免用户产生误解。

5:窗口缩放时,控件位置、布局:

为了使界面不出现跑版或者难看的局面,解决方法:

1:固定窗口大小,不允许改变尺寸,

2:改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。

BCB/DELPHI的VCL中,大部分控件有布局属性:

某些控件拥有alignment属性,可以用来做布局调节:TcustomPanel,Tmemo等,考左靠右靠上靠下以及撑满(Client)属性,用来根据版面自动调节。

大部分控件有属性Anchors,里面上下左右akLeft,akTop等如果为true,则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八:(TABORDER)TAB顺序

习惯用法,阅读顺序,从从左到右,从上到下

窗体中控件的Tab按键激活顺序,TabOrder,.BCB/DELPHI中使用窗体设计右键菜单选择taborder设置,VC中窗体RES编辑区域使用ctrl+D

九:(ShortcutKey&Accelerator&PopMenu)快捷键、加速键和弹出菜单

·快捷键:

1:全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。

2:快捷键写入帮助,特殊说明,并在使用培训时强调使用

·加速键:

1:使用非破坏性缺省按钮,回车、ESC键的正确使用一个窗体,有默认加速键,如回车表示激活当前窗口设置为default的按钮动作,esc表示关闭窗口。

在调用default按钮动作和关闭动作时候,不应该做有破坏性的操作,避免用户错误操作产生危害程度,例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时,应该屏蔽esc,或者做退出提示,告诫用户是否保存提交。

2:可接收动作控件必须拥有加速键,统一加速键描述(&A)

为结合键盘使用,可操作控件都应该有加速键,加速键定义准则,为英文单词第一个字母,如果同一窗体重复则用第二个字母,以此类推,则加速方式为alt+这个加速键,用统一的方法标识在界面中,如XXX(A)或者wps的A.XXX英文可直接在字母下标识下划线Cancel,

对于无法像button一样显示快捷键的Edit等控件,则在Edit描述的Label中显示快捷键。

·弹出菜单

辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户,所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十:(ACTION)用户交互

1:disable而不是notvisible

要使一个功能有时允许有时不允许用户使用,则这个控件的不能随便隐藏,应该使用disable属性进行表示,以免用户发现控件失踪后措手无策

2:窗口弹出位置要明显

点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。

3:执行动作要提示

给用户一个视觉感受的同时,写程序的时候应该注意用户的交互感受,UI作为人机对话的工具,用户做了任何动作,应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显,但不应提示过长,可以有以下几种方法:

当用户点击按钮等动作进行一个工作时:

1:弹出交互对话框让用户点击确认。

2:改变UI中控件参数提示:(处理不用用户确认的提示,有一定延时,或者用户按键后自动清除。)

如:改变标题栏字符串,显示“信息:提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。

3:听觉提示:

在确定有声卡,用户可以听到声音的时候,发出特殊声音提示。一般作为重要提示的辅助。声音不应过长,紧急错误提示应该短促,频率较高,成功提示应该舒缓,轻松。等等……

十一:(HELP)联机帮助:

什么时候要帮助,什么时候不要帮助

1:系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述2:特殊操作、特殊功能界面,在界面上加控件直接连接到对应的HELP文件中

3:特殊设置详细,应该在界面上用简洁明了的语句说明,或者是好用Tiptool,并由第二步帮助

帮助文档:

结构化,按功能模块划分

必须阐述功能通过什么方法可以在软件中实现

帮助文件是帮助用户更好的使用软件,措辞要恰当、简捷、通俗易懂,每一句话都应该有目的,帮用户解决问题

帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持,网址连接、信箱地址、电话号码绝对不允许无效。

十二:发行时阐明规则

对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表

附录:

美工何时参与进来:

美工作为界面美化的主要人员,不但拥有艺术设计、包装设计的才能,还应该穿插整个项目,给界面程序设计人员提出系统参考意见。

1:软件设计前期,美工参与需求了解,分析同类软件界面有缺点,提出主色调、典型界面风格、以及构思整个美术包装等。

2:界面原型设计过程中,与开发人员共同修改、商榷最终表现样式,以及确立UI标准。

3:程序开发过程中,提供标准风格的资源文件(icon,cur,bmp等),并总结出统一风格的资源的设计过程,形成规范文档*.

4:产品化方面,协助制作帮助文件、网站风格以及参与制作,制作附带宣传图片、动画、产品包装、海报等。

篇2:UI规范&UI指南&UI组件交互设计

在我回家之前收到了一个朋友的邮件,我们有过简短的讨论,

今天在整理本月邮件时发现这个邮件可以公布在BLOG上,也许会引发一些话题和收获。

Vinny 致 我

引用自

抱歉,可能我们正在做着没有意义的事情,但是在我们还没有得出一个结论的时候,大家都还抱着一些幻想和期待!

附件是我纪录他们讨论的截图!期待您的回复:)

附件:

白鸦 致 Vinny

引用自

其实很早一起我们就谈论这个问题,

很多人把类似的“UI组件”“UI控件”叫做“UI规范”, 后来我们讨论的结果是:叫做“UI指南”比较合适。

因为“规范”是虚的!“指南”是用来指导和提高工作效率的…

我觉得如下几点需要说明:

1、不管是叫“UI控件”还是叫做“UI指南”,它都不应该和“直接产品易用性”扯上直接的关系。 它顶多只是“项目管理”或者是“产品开发”的一个“效率管理”范围。 只是一种“工作方法”而已。

2、千万不能为了“让产品开发的资源库中多几个G的资料”而搞这些东西, 为了规范而规范只能劳民伤财!

3、这种“UI指南”做好了做实用了确实会对产品的开发乃至整个产品的规范有很大的作用,某些程度上说也是提高和规范UI的一个重要方面。

4、做这样的东西不同的产品应该有不同的办法,“没有通用的易用性/可用性”。

5、一个长久的产品确实很有必要具备这样东西, 因为真正的项目不只是一个项目应该是一个产品 甚至应该说是一个品牌。

所以这样的东西也很有必要。

6、不要说“作出来这样完成的系统指南成本太高,我们不去考虑”! 其实完全可以“先计划一下,慢慢去做起来”。

不要想一口吃个胖子,也不要一点事情都不作。

也许你开始作了就会发现:“慢慢积累,点滴去做,很快就有成绩出来了”。

先做起来…

7、另外扯一个话题“没有行业规范”,

所谓的行业规范应该是同行企业之前慢慢形成的一种通用习惯。

在这个商业社会上,如果谁说他的东西是“行业规范”,那么他一定有很多另外的目的….

8、如果做了这个东西,一定是要长期维护的。 最主要的是“开发者用着方便”。

9、其实我更关注“用户情感设计指南”,比这种“用户界面应用指南”要有意思。 最近太忙,有时间写篇BLOG解释一下这个。

参考:

www.uicom.net/blog/article.asp?id=95

www.uicom.net/blog/article.asp?id=169

Vinny 致 我

引用自

谢谢您的见解,还有个棘手的事,各个角色争执不下——原型问题

以下是两个角色的观点,我也为之困惑:

UI:UI需要BA(业务分析师),提供一个明晰的业务流,来完成整个原型设计;

BA:完成需求分析后,再接着完成原型(比如visio),以及页面流(体现小部分交互样式)。

先前,原型和交互通常是UI根据BA的需求说明书来思考完成。但问题在于需求说明书的业务场景是所有角色(或权限)的全集,相关的细业务流是模糊的,这样通常导致UI输出的页面流不够完善、业务需求反复修改!

目前由BA取代需求、原型和交互这部分工作,我的UI同事认为这样会忽略可用性的问题,造成不好的用户体验,以及产品价值。

·其实就我们的业务特点而言,用户是有着相对的特殊性,我的疑惑:要照顾到特殊性就非得忽律对可用性的重视么?!

·BA认为UI所须做的是不参与项目工作,而是来规范和评估他们的原型结果,BA承担原型和交互其间问题你怎么看?!

·您认为下面这个流程有什么是可以省的?或有什么地方存在意识上的缺陷?

用户研究-分析需求-可用性设计-出原型-用户沟通迭代-gui设计-code

白鸦 致 Vinny

引用自

我这两天在家做手术,没有太多时间回答你的问题。

暂时我只能说:你的看法和观点有点片面,********

等我身体恢复后请提醒我,我应该可以给你完整的回复。

起码可以肯定一点:在这里流程不是最重要的,重要是的协作方法。

sorry 。。

来自:uicom.net/blog/?p=365

篇3:iOS平台UI设计基础规范

此文分别从控件+布局+模态情景+手势交互+动画+字体等六个方面介绍了一些iOS平台设计的基础规范,有志于UI设计的童鞋推荐收藏起来,将来要做相关的设计可以直截了当戳进来学习,

一、UI的控件概述:

1、框架UI的元素分为4类:

A:栏:状态栏目和导航栏的结合体;

B:内容视图:应用显示的内容信息,包括相关的交互行为,例如滚屏、插入、删除等操作进行排序;

C:控制元素:产品行为或显示的信息;

D:临时视图:临时向用户提供重要的信息,或提供额外的功能和选项。

2、框架UI的尺寸:

3、图标icon的尺寸:

二、UI的布局概述:

1、可点击对象的区域:尺寸不要小于44*44px;

2、将重要的内容和功能放在权重高的位置,将重要的元素放在前半屏比较好,对于阅读习惯从 左到右的用户来说,更贴近屏幕左侧位置容易引起关注的;

3、利用视觉表现形式的权重和平衡,尺寸较大的元素具有更高的权重,对于尺寸较小的元素来 说,更能吸引目光,看上去更加重要;

三、UI的模态情景概述:

1、模态:一种用来承载特定内容、功能或体验的模式,有其自身的优缺点。它可以帮助用户完 成某些任务,或在不受干扰的情况下获取信息,但会暂时性的强迫用户停止与应用其他部分 的互动;

2、保持模态任务的简单、简短、易聚焦:不要将模态视图打造的好像是嵌在应用当中的迷你应用;

3、始终提供一种明显而安全的退出方式:要确保用户在退出模态视图时,能够对接下来要发生的 事情有明确的认知;

4、使用警告框来传递那些必不可少的重要信息,通常还要提供可执行的功能选项。

四、UI的手势交互概述:

A:通过点击(tap):按压或选择一个对象;

B:通过拖拽:滚屏或移动对象(将从界面的一边移动到另一边);

C:通过滑动(flick):快速滚屏或移动对象;

D:通过一个手指轻扫(swipe):可展现更多内容,例如:列表的删除按钮,从界面顶端展开通知中心;

E:通过双击(double tap):可将内容放大置于屏幕中间,主要是放大和缩小的转换;

F:通过双指涨开(pinch open)或闭合(pinch close):对内容进行放大或缩小;

G:通过长按(touch and hold):在可编辑或可选择的文字上显示放大镜,用来定位光标;

H:通过摇晃(shake)机身可执行撤销或重做的操作,

五、UI的动画概述:

1、漂亮而精致的动画效果遍布于ios各处,它们使应用体验更具动态性,更加吸引人,精细而恰 当的动画效果可以:

A:传达状态

B:增强用户对于直接操作的感知

C:通过视觉化的 方式向用户呈现操作结果

2、尽可能与ios内置的应用的动画模式保持一致:人们已经习惯内置应用当中各种精妙的动 画效果,实际上,用户往往会将内置应用当中的动效看作一种体验的标准,例如切换视图时的平滑过渡效果,切换横竖屏时的流畅反馈,或是能表现出各种物理效果的滚屏动画等等,这些 都逐渐成为了人们预期当中的一部分。

六、UI的字体概述:

1、字体是ios7设计的关键,大多数操作都是点击文字或点击图标,按钮也会有,但是占的比重很小;

2、苹果的默认字体是Helvetica Nenu,一种纤细简单的文字,但那不是你唯一的选择;

3、Ios7的字号稍微加大了,主要由于它的用途,而且文字之间的层级关系至关重要,利用颜色 和不同的粗细,来保持文字的布局和UI元素的清晰易懂。

4、苹果字体规格说明:

A:导航栏标题:medium 34px;

B:按钮和表头:light 34px

C:表格标签:Regular 28px;

D:Tab页图标标签:Regular 20px

篇4:Android 3.0设计思想规范和UI设计规范

文章描述:Android 3.0(蜂巢)交互&UI设计规范.

Android OS自上市以来,由于缺乏统一规划,使得不同设备在 1.5、1.6、2.0、2.1、2.2、2.3几大版本徘徊,本人用的HTC Hero(俗称G3)也是从1.5~2.3一个个版本,10多个rom手动刷机试过来的,过程及其纠结 ~,

多系统版本带来的问题就是缺乏交互、UI的一致性,外加硬件厂商HTC、摩托罗拉、三星、夏普(创新工场点心OS)、小米(MIUI)等公司热衷于UI的个性化发挥,以及民间高手的DIY rom 等因素,影响着安卓饭儿的用户体验,使各阶层用户徒增学习使用成本,也让APP开发者在不同版本兼容性间疲于奔命。

过渡开源的Google终于明白一个道理:没有规矩不成方圆,对搭载Android 3.0系统的所有平板电脑进行UI设计规范的梳理。自微软、苹果之后, google也终于推出了自己的UI设计规范,这对用户来讲是个贡献。

此规范的主要目的在于统一Android 3.0设计思想,从视觉设计、UI模式,框架特点、前端开发等方面去指导、影响后续开发者。

这就是Android 3.0的系统初始UI,考虑下蜂巢比ipad设计好在哪里

多任务、板块之间的灵活切换、工具添加……通过缩略图,而变得更加直观。

Action Bar、多栏布局、应用程序导航,这些系统功能在姜饼(Android 2.3前版本)和蜂巢(Android 3.0)之间的设计异同及取舍

UI及交互细节的细节处理:去除文本框、文字间距与框体尺寸(dip)

Popup的设计

关于Back和Up的交互流程设计

在这插一句:Back 按钮在Android 2.3前版本里它是一直是个硬邦邦的实体按键,由于这个脑残的设计,让许多用户想”返回”却在屏幕操作中找不到门路,最可怕的是每个”back按钮”在不同硬件设备中的位置不一样!这你敢信吗.

而在Android 3.0中,Back采用触摸按键和屏幕融为一体,欢呼!

PPT下载地址:

file.1mobile.cn/KunlunUED-1mobile-android_phones_and_tablet-modify.ppt

由Kunlun UED(www.gameued.com ) &1mobile(www.1mobile.cn ) 联合翻译

感谢与我一起辛苦翻译的严峻同学,翻译不详之处请各位指正,

篇5:什么是UI

什么是UI(用户界面)?想起来好像有些滑稽,当初知道何谓UI,是一个漫长的过程:年初我开始做一些软件界面的图形设计工作,图形设计的过程是最乐此不疲而充满感性创意的,看到自己的设计被别人装在机器上使用那是一个很爽的感觉,

什么是UI

这个阶段阶段一直到了02年底,有一天我的LEADER给我看了某个国外同类软件的用户界面展示,我在那里看到“UserInterface”这个词。于是我知道了:“哦,原来我做的是UI设计的工作”。从此知道了什么是UI,知道了这个词就又找到了很多资料,然后请我旁边的翻译同事帮我,于是我又知道了UI设计绝不光光是“图形界面设计”更不仅仅是“软件界面和网站界面”,知道了“一个茶壶同样可以看作是一个用户界面”,知道了好用和美观一样重要。

篇6:从iOS 出发总结iOS多设备UI适配规范方案

iOS5.0于本周提交App Store,这两天iOS 成员各自都在总结,如果你仅仅认为首页/搜索改版是主要需求,那你就错了,其实iPhone6、iPhone6Plues的适配才是重点。

随着苹果发布iPhone6、iPhone6Plues,过去只属于Android设备的移动App多种设备尺寸适配问题,iOS的适配问题终于还是来了。

研发GG表示 。。。(根本是库克没调研清楚,小道消息说iPhone8又要回归4寸屏)

由于经验不足,发版过程界面适配BUG一直反复。为了将来不再受制于界面适配影响工作进度,总结5.0的经验之后,今天 iOS小伙伴们坐下来一起定制了这份UI规范。

以iPhone6为标准,对iPhone其他分辨率,制定了不同类型的适配方案。

首先了解iPhone主流设备:

将控件分为这几类:

一、文字流

文字流控件定义了一种方案:

1、字号、行高都不变;

2、行数,是否定行需看具体内容;

3、控件整体以iPhone6为标准,进行等比缩放。iPhone6在此基础上乘以1.10倍,iPhone5在此基础上除以1.17。

二、弹性控件

方法一:控件不变、间距变;

(如淘宝底部导航)

方法二:间距不变,缩放控件;

(如 轮播图下四个入口)

方法三:左对齐,间距和控件都不变;如App Store中“精品推荐”效果

(家里打不开store,无法截图 /(ㄒoㄒ)/~~)

三种方案中,方案一最适合 这个产品,方案二为辅助,

方案三目前没用,最为备选。

三、图片

方案一:像轮播图、广告图,这类横向拉通的图片需要做多套图,保持图片高度不变;

方案二:小图,则进行等比缩放。以iPhone6为标准,进行等比缩放。iPhone6在此基础上乘以1.10倍,iPhone5在此基础上除以1.17。

四、两种控件叠加

后三种情况,在很多同行分享的博客上并没有提到,或许他们笼统的归纳到前三种之中,但我们还是觉得需要单独定义。

两种控件叠加的情况就要分视觉设计来分类了:

若与上层控件与底部密切关联较强,就可按等比的方案来操作。

( “热门资源”模块中的叠加效果)

若关联性不够强,则可以上层控件大小不变,间距也不变而仅缩放下层控件。

(搜索中的图标没变,输入框等比拉伸)

五、Table View

1、左右固定;

2、中间拉伸;

3、高度不变;

( 我的首页list)

六、模块间

保持模块间高度不变,不需要过多处理。

---------------------------------

篇7:规范

规范

规范guī fàn[释义]

①基本义:(名)约定或规定的.标准。

②合乎规范。口语的语言有时不~。(作谓语)

[构成]  并列式:规+范[例句]  〈外〉日语。

篇8:ui设计师年终工作总结精选

工作一年了,结合我自身谈谈ui设计的认识。

一、简洁的设计

一个设计成功的界面都是简单大方、容易识别的,毕竟界面是供用户操作完成工作,而非拿来娱乐休闲的,尤其是我们这种管理系统界面。一个色彩绚丽、让人眼花缭乱的界面不仅不能增加美感,更会给用户的操作带来不便,降低效率。

二、界面布局不要盲目追求“越满越好”

良好的界面布局是吸引客户的一个亮点,是客户评估应用软件的一个重要指标。好的布局不仅给人耳目一新的良好视觉享受,更可以帮助用户快速的熟悉软件,间接的成为用户的操作指南。

界面布局要在逻辑合理、便于用户操作的基础上尽量的美观,无需堆砌内容。有时候我们为了使界面看起来比较充实,不显得空旷,硬生生的把一些不相关的功能拼凑到一起,其结果是用户操作时像走迷宫一样,这样的界面只能增加不必要的复杂度,让用户眩晕,碰到个脾气暴躁的人,估计要拍桌子了吧。

三、界面设计不要完全依靠“经验主义”

目前很多项目都存在着这样一个现象:开发和设计人员并不能跟用户直接沟通,所有的需求都是来自二手材料。这种情况下,开发和设计人员并不能详细的了解用户的操作习惯等重要信息,只能根据自己的经验来进行设计和开发。等产品出来客户验收时,往往发现我们生产出来的东西和客户的原始需求有一定的误差,造成返工,增加了项目成本。

课上老师曾经说过这样一句话让我记忆深刻:“把自己变成用户”。在做设计和开发时,我们大多数是把自己当成设计开发人员,而不是用户。如果把自己变成用户,站在用户的角度来进行设计开发,我想我们的产品对用户需求的符合度一定会大大提升。

如果有条件的话,能够去用户的工作环境去体验一下相信对我们的设计开发一定会大有裨益的。

篇9:ui设计师年终工作总结精选

公司决定将技术部门单独划分出来成立制作中心,后又将制作中心分为UI和程序两大块,我个人也被任命为公司总设计师,这样的变更表现了公司对技术业务这块升级提高的决心,同时对公司领导对我的信任也表示感谢,虽然制作中心的UI部门只成立了几个月,各项工作算也比较顺利的在进行,并且实际工作的完成效果也是不错的,特别是几个紧急的项目的完成更说明了这是一个能打艰苦仗、打硬仗的团队!这些都与这个团队中每个人的责任心和人与人通力配合所分不开的,我在这里也特别感谢他们,希望我们能继续守护住这份团结,这种凝聚力,后面还有更加艰巨的任务还在等着我们,

这一年中虽然看到了一些成绩,但是实际的问题仍然存在的,很多老问题依旧在暴露,我们也必须正视的这些。实话讲,从真正UI层面来讲,我们所做的远远不够,一些旧的程序+页面的思维和工作办法仍然会成为我们日常工作的中的主导,我们现在的UI远远还只是停留在表面肤浅阶段。究竟什么是UI?为什么要去做UI?如何去做UI?相信我们其中还有很多人还是在这个概念中混淆的。

今天看到了一篇新闻,__在__公司的年会上痛骂让他赚到千亿财富的“__”。在这个年会上没有舞台装饰,没有音乐背景,甚至没有灯光,黑暗中所有__员工听到的是一段段来自用户的声音,所有的声音片段都来自于客户部门的电话录音。录音的内容很刺耳,没有常见的歌功颂德,“没有任何好话”,全部都是指责、抱怨、无奈、骂、恨、批评。“烂,太烂,烂到极点。”__随后登台,并选择在此场合如此形容__的用户体验。众所周知,__是国内少数拥有独立UED部门的公司,具有比较完善的工作流程体系、人才资源和展现舞台,他们对用户体验的研究和实践是国内大多公司都无法披靡的,也就是因为这些,他们也成了很多公司UI部门都学习和效仿的对象。不可否认__是国内乃至国际上都绝对一流的网络应用平台,__的冲冠一怒说简单的了就是为了用户,当我们退去__的一切光环,我们看到其实这就是一个用户的平台,谁能主宰这个平台的成与败,答案只有一个,那就是用户。当用人为的主观意念强加于这个平台的时候,不管主观上如何的有道理和层次,但是用户就可能被忽略,当被忽略的时候用户必定会抱怨,如果还不加以重视,只有一种可能,被用户所抛弃!

曾经看到过可用性专家__一个观点,他将一个公司的可用性成熟度划分为8个阶段:

1、敌视用户体验。

2、开发者为中心的设计。

3、零星的可用性。

4、可用性投资。

5、可用性部门建立

6、系统的可用性流程。

7、整合的UCD。

8、用户驱动的公司。

__对__之怒由用户而生,可见如果按照这个理论话,__已经开始用户开始驱动公司产品的发展了,__在逐渐步入第8个阶段。回过头来,同样以这样标准来评价目前我们公司的目前处于的阶段,我们会看到很多问题,大多项目的定位会以管理者甚至程序技术人员的标准去要求,用户在我们这里变成了“客户(具有主观需求并强势的少数用户)”,“客户”满意就是我们的满意,短期看来是会达成一定的效果和满意度,但是长久如此,由于设计初期的偏差,角速度理论随着时间的推移被不断放大,这样产品可用性也就可想而知了,设计出来的产品或是有始无终、或是半途而废也就成为了家常便饭了,的确我们需要走的路还深长、需要做和提高的东西还有很多,很多……

一个好的互联网产品必须以用户为中心进行设计,20公司UI部门不单是要完成目前的界面设计的工作,严控产品质量,优化工作效率;而且任务重心将是要加强公司的产品设计、可用性设计。这就需要在部门职责划分、工作流程、准则规范、人员结构等方面下大功夫。我们计划将从产品设计和信息架构着手,以规范性理论指导具体工作,在“业务架构”明确、“技术架构”稳定的前提下,深入到用户与产品的研究和实践中,在一些重点项目中进行用户分析研究、建立用户、产品、设计人员三方的沟通渠道,设计中跟踪并分析用户体验的质和量。工作目标就一个:以用户为中心设计产品、完善产品,使产品能够准确的把握用户。

不过我们也会从公司现实情况来看,目前可能无法产生专门的UED部门,这就需要所有和产品设计和用户体验相关的部门人员:“放弃单打独斗,和更多的人一起为更好的产品和用户体验而努力,这是我们现在最该做的。”我深知在这其中将要面临的困难和各方压力,但是正确的路线我们必须去坚持,哪怕路上充满艰难险阻,一切为了产品,一切为了用户。引用__一句话:“很多公司,都活不到五年,活到五年以上的公司没有这么一次疼痛,没有这么一次折腾这个公司是走不长的,今天我认为是__开始正视自己问题的时候。”

最后半借用__的一句话:“看来为这件事,至少值得我们也再干。”

篇10:ui设计师年终工作总结精选

在成熟和迷惘的交织中,2020年悄然流逝了。

在我眼里,设计室也是一个没有硝烟的战场,它能磨炼人的意志,淡泊人的心灵,平面设计能得到快速提高,人的心理也能快速成熟起来,这无不凝结着每位领导的英名决策和正确指导。年终岁末的时候,人总是特别感叹生命的蹉跎,回首与展望会是两个亘古不变的主题。下面我将从工作情况与内部合作两个大的方面来分析自己一年来的得失。作为一名ui设计人员,工作能力的提高是重中之重。

2020年的时间里,我对我们所从事的工作流程,方法等有了较深的认识,对ui设计规范也有了一定的了解。能力来源于实践,实践检验能力;一年来,我对自己的坚持一步一步地脚踏实地走过来,我能熟练的掌握photoshop等设计软件,加以自己对平面设计的理解,能作出一般的单体效果图,但是还需要不断的学习和实践。一年来,我参与了公司的部分的ui方案的设计,我跟随设计组的领导一起查阅资料,埋头苦干,并虚心向同事请教,圆满完成了既定任务。

在独立设计的过程中,我发现了自己的很多不足之处,特别是对复杂设计方案的把握还缺乏基础理论性的认识,这都是在以后的工作中必须首要加强的。

【UI规范&UI指南&UI组件交互设计】相关文章:

1.ui设计教学

2.ui教学计划

3.优秀的ui设计

4.大学生ui设计简历

5.UI设计面试简历

6.UI设计师工作总结

7.UI设计师个人简历

8.ui培训心得

9.ui设计师年终总结

10.ui设计实训报告

下载word文档
《UI规范&UI指南&UI组件交互设计.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度: 评级1星 评级2星 评级3星 评级4星 评级5星
点击下载文档

文档为doc格式

  • 返回顶部