UI界面设计规范及流程演示教程三篇doc.docx
《UI界面设计规范及流程演示教程三篇doc.docx》由会员分享,可在线阅读,更多相关《UI界面设计规范及流程演示教程三篇doc.docx(13页珍藏版)》请在冰点文库上搜索。
UI界面设计规范及流程演示教程三篇doc
UI界面设计规范及流程演示教程三篇
第1条
用户界面设计教程界面图标创意设计我在网上见过很多设计师的图标制作过程。
基本上,他们倾向于引入技术.事实上,除了技术之外,图标设计过程中最重要的事情就是图标创意。
然而,互联网上的系统介绍很少是借用这个实际的界面设计项目。
让我们分享我自己对界面图标制作的创意阶段的理解.并用丰富的插图解释我自己的想法。
作为图形界面设计师交流的入门,我欢迎大家进来交流。
这个过程相对较长。
我只能分阶段准备。
我将在寄出后不久毕业。
有很多事情要做。
我很理解今天要画一些草图来解释创造力的后续准备。
事实上,在图标创意阶段的第一部分,在这个阶段之前还有一个重要的步骤,那就是创意准备。
根据项目的要求,确定图标的样式。
在界面设计过程中,有一种风格评估方法来确定项目采用什么风格路线.。
这也是项目早期阶段用户研究的内容。
潜在公司将制定“用户角色”来指导界面的视觉风格方向、界面内容构建和交互设计。
当我们收到设计任务时,我们如何开始设计图标?
首先,我们需要理解接口需求。
每个功能图标的定义应该非常清楚,否则我们的设计结果会让用户难以理解。
这也是图标设计所关心的可用性问题。
我的博客课程引用了JakobNielsensWebsite中的文章“图标可用性”,你可以去看看。
糟糕的图标设计最终会导致用户界面操作体验失败。
然而,视觉美学和可用性之间有时会有冲突。
我们不能走极端。
我们只关心可用性,却忽略了设计的美学方面。
我们不能追求设计的审美需求而忘记这是一个功能界面图标。
为了理解功能需求,最好在两者之间取得平衡。
在我们收集了许多可以在“文字和图形”之间转换的元素,并用生物或其他视觉产品、或操作提示来代替要表达的功能信息之后。
例如,我们会想到音乐,音符、光盘、音乐播放器、耳机,等等。
原则上,越接近用户的心理模型,表达信息的最佳方式就是使用常见的视觉元素。
隐喻是图标设计中寻找物体与所指之间的内在意义的一种必要的思维方式,它要求设计者细致地观察生活,并具有丰富的联想能力。
当然,这也是设计的难点。
做一个好的图标设计不亚于一个好的产品创意设计,包括最终的图标制作,这也反映了设计师的能力。
尤其是现在高分辨率显示设备被广泛使用。
一个好的界面需要被用户认可,高质量的图标设计是必不可少的(困难)。
现在对图形用户界面设计的理解仅限于图形艺术家,管理者的意识往往与行业的正常发展相关。
我们的工作需要每个人的共同努力才能得到认可。
)下面是我画的图标的草图。
图1、图2、图3、图4、图5、图6。
素描阶段的第二部分是画出我们的想法并检查视觉关系,也就是说,从视觉的角度对素描做更多的努力。
这是更有效的,并避免渲染后的遗憾。
(后悔)首先,我们需要确定图标的视角。
这与一组计划中每个图标的透视方向相关。
这是图标设计一致性的基本要求,视角是统一的。
然后逐步添加细节。
如下图所示,在图7中,在这个阶段,我们还将检查元素的组合(有单词,请点击查看,打字很累人)。
在下面对图图8的视觉分析中,点击放大的图标,图标必须结合不同的形式来表达特定的含义。
借助于由单一形式传达的内部信息,它可以被拼凑起来传达另一种信息。
例如,在设计“导航”功能图标时,我们的第一反应与卫星有关,但我担心它不是一只狗来传达与单个卫星形状相关的导航含义,因此我们将导航相关信息图标“坐标”、“旗帜”和“陆地”等联系起来。
之后,设计师根据视觉平衡的原则,合理地安排了主次、的空间关系。
应该注意的是,与要表达的功能相关的图形或对象不应随便使用。
它们应该被仔细选择,并且对每个人来说熟悉、易于记忆的对象或形状更好。
毕竟,我们的目标是帮助用户在易于记忆、易于理解的前提下,更生动地理解计算机程序的内部功能含义。
也不能用太多的图形来表达图标的意思,太复杂会影响用户的理解。
上图是分析形态组合之间的关系,探索最佳组合方式。
形成视觉和功能的统一。
第三部分是草图渲染阶段,当我们完成了前面的过程,我们有信心。
我觉得这个草图已经清楚地表达了我的想法,能够与功能信息紧密匹配。
(我通常对所画的图标进行实地测试,展示给我的同学或同事,并询问他是否能理解我所画的图标的含义。
)然后开始伟大的渲染项目。
在这里,我们来谈谈工具的问题。
许多人问应该用什么工具来画这个图标。
我的回答是,只要能画出图标,目的就能实现,任何事情都可以做,即使是在编辑前手工绘制和扫描。
通常我们使用Photoshop、Illustrator、Fireworks和其他软件来绘图,这取决于您的习惯和对软件的熟悉程度。
我使用的是偏向软件XaraXtremepro,这是一款功能强大、速度快的矢量软件。
然而,该软件的体积非常小,其功能更侧重于绘图。
绘图方法是免费的。
只要你有艺术技巧,你就能画出漂亮的图标。
接下来,我将描述Xara以一种程序化的方式绘制图标的过程。
时间很短,只需使用XARA创建先前草图图标设计的最终效果。
先放入一个简单的过程,然后补充完整的图9、图10、图11、图12、图13、图14、图15、图16、图17、图18、图19、图XXXX年龄、性别、爱好、收入、教育水平等。
在哪里使用它(在办公室/家庭/车间/公共场所)。
如何使用(鼠标、键盘/遥控器/触摸屏)。
上面的任何元素都会相应地改变结果。
此外,我们还必须了解处于需求阶段的类似竞争产品。
类似的产品比我们更早出现,我们必须比他做得更好才能有价值。
因此,仅仅从界面美学的角度来说,并没有一个客观的评价标准来判断好坏。
我们只能说哪个更合适,哪个更适合我们的最终用户是最好的。
通过分析上述需求,我们进入了设计阶段。
也就是计划的形成阶段。
我们设计了几套不同风格的界面供选择。
C、在调查和验证阶段,必须保证在相同的设计和生产水平上有多套款式,并且看不到明显的差异,以获得用户客观、真实的反馈。
在测试阶段开始之前,我们应该清楚地分析和描述测试的具体细节。
在研究阶段,我们需要从以下几个问题入手:
用户对每套方案的第一印象;用户对每套方案的综合印象;用户对每组方案的单独评估;最爱的选择;选择第二喜欢的;和图形的标记。
结论出来后,请让所有用户说出最流行的方案的优缺点。
所有这些都需要用图形、直观和科学的方式来表达。
在方案的改进阶段,经过用户调查,我们得到了目标用户最喜欢的方案。
但是也要理解为什么用户喜欢它,以及他们有什么遗憾,这样我们才能进行下一次修改。
在这个时候,我们可以把我们的精力投入到一个计划中,使它细致而精致。
E、在用户认证阶段纠正方案后,我们可以将其推向市场。
但是设计还没有结束。
我们也需要用户的反馈,优秀的设计师应该在产品上市后去专柜。
零距离联系最终用户,了解用户使用时的真实感受。
为未来的升级积累经验和数据。
通过以上对设计过程的描述,我们可以清楚地发现用户界面设计是一个非常科学的推导公式。
他拥有设计师对艺术的理解和感知,但这绝不仅仅代表设计师的个人绘画。
因此,我们一再强调,这个工作过程是一个设计过程。
用户界面设计没有艺术设计师。
2.用户界面设计流程2.1概述根据上述原则,分析公司产品的特点,制定符合软件产品(或项目)生命周期的用户界面设计流程。
在每个产品(或项目)的生命周期中,用户界面设计者应严格遵循流程,完成每个环节的职责,以确保流程的准确有效实施,从而提高产品的可用性和质量。
第二,用户界面用户体验设计原则和规范1应该遵循的基本原则,无论是控件的使用、提示信息的措辞,还是color、窗口的布局风格,都要遵循统一的标准并做到真正一致。
以这种方式获得的好处1使用户在使用时能够建立一个准确的心理模型。
熟练使用一个界面后,切换到另一个界面可以很容易地推断出各种功能。
句子理解也不需要苦心理解。
2降低培训、支持成本。
支持人员不会一个接一个地费力指导。
3.给用户一个统一的感觉,没有混乱,愉快的心情,增加对项目组经验丰富的实践人员的支持,建立用户界面规范艺术家提供的配色方案,提供总体色图界面控制程序人员、用户经验人员提出一个合理的统一的控制库。
参考标准接口使用符合行业标准的标准控制功能。
对于windows平台,请参考微软用户体验控制风格。
它的风格可以在允许的范围内统一修改、音。
可以参考其他软件高级操作来提取有用的功能供本项目使用。
你不能盲目地跟随和漫无目的。
根据需要,设计了特殊的操作控制。
标准是简化操作、以实现某个功能。
界面实现者与艺术设计者讨论控件的可实现性。
不执行这一步骤将导致对彼此工作的不满和不一致的混乱。
重复上述工作。
合理化文档用户界面标准的建立描述了上述规范,迫使界面设计者理解它,并且作为开发指南,SQA人员监控开发人员是否遵循它,并且及时警告开发人员。
2正确使用颜色,遵循对比度原则1统一颜色。
根据软件类型和用户的工作环境选择合适的颜色,如安全软件。
根据行业标准,黄色、绿色代表环保,蓝色代表时尚、紫色代表浪漫等。
浅色可以让人舒服,深色不会让人觉得累等。
2如果没有自己的系列接口,可以采用标准接口来减少这方面的考虑,实现与操作系统的统一。
阅读系统标准色卡3色盲、弱用户,即使使用特殊颜色来指示关键或特殊的事物,也应使用特殊的指示器,quot4个配色方案,如强调数字和图标,也需要测试。
通常由于显示、图形卡的问题,每台机器的色彩性能是不同的,应该严格测试。
不同的机器应该进行颜色测试。
遵循对比度原则,在浅色背景上使用深色文本,在深色背景上使用浅色文本,在白色背景上可以很容易地识别蓝色文本,但是在红色背景上不容易区分,因为红色和蓝色之间没有足够的对比度,并且蓝色和白色之间的对比度非常大。
除非在特殊场合,禁止使用强烈对比和令人作呕的颜色。
6在整个界面中尽可能少地使用不同颜色和类别的颜色表。
具体标准参见《美术统计学术标准》。
色彩图表的构建对图案设计、包装设计中的艺术家起着标准的参考作用,对程序界面设计者设计控件、表单色彩匹配起着基于规则的作用。
3资源是一个丰富多彩的人机交互界面,需要精致的鼠标光标、图标和指示图片、底图等。
1还必须遵循统一的规则,包括建立上述颜色表,图标建立的步骤也应尽可能形成标准。
参考itop的瞭望栏图标设计标准2,该标准具有标准图标风格设计、统一构图布局、统一色调、对比度、色标和图片风格3。
底图应集成到底图中,使用浅色、低对比度和尽可能少的颜色。
4个图标、图像应该清晰地表达意思,遵循通用标准,或者用户的机器很容易与物体联系起来,绝对不允许画奇怪的图案。
鼠标光标的样式是统一的,应该尽可能使用系统标准来防止重复。
例如,在一些软件中,手的形状可以在4分钟内不同。
4字体使用统一字体,字体标准的选择取决于操作系统的类型。
标准字体使用中文,“宋体”,标准MicrosoftSansSerif使用英文。
隶书、草书等。
不考虑特殊字体。
在特殊情况下,图片可以用来替换它们,确保每个用户都能正常显示它们。
字体大小基于系统标准字体,如MSS字体8点,小字体9点)字体大小5(10.5点)。
所有控件都尝试使用统一大小的字体属性。
除了特殊情况,如特殊提示信息、增强显示,ITop使用BCB。
默认情况下,所有控件都使用parentfont,不能修改,这有利于统一调整。
系统大小字体属性更改的处理。
Windows系统具有设置大字体属性的桌面设置。
许多界面设计者经常为此烦恼。
如果设计中遵循了微软的标准,则使用相对大小作为控件的大小设置。
当在大字体和小字体之间切换时,相对来说不会有什么特别的问题。
然而,使用点阵作为窗口设计单位通常很方便,这导致在改变大字体后布局混乱。
在这种情况下,我们应该做相应的处理1。
编写程序自动调整大小。
点阵值乘以相应的比例2。
所有点阵都用作单位,忽略系统字体的调整。
这可以减少调整大字体带来的麻烦。
这种方法主要用于BCB/德尔菲法,但不可避免的结果是与系统不统一。
5文本文本表达式提示信息、帮助文档文本表达式遵循以下准则1口语、礼貌、多用途您、请不要使用或使用不太专业的术语,停止使用逗号、句号和符号分号来表示措辞错误的单词2断句。
如果提示信息较多,则应分段,3警告、信息、不正确使用相应的表达方式4使用统一的语言描述,如关闭功能按钮,可描述为退出、返回、关闭,则应统一规定。
根据用户的不同,使用合适的语气的话,比如特殊的软件,可以有很多专业的归属,用户对于孩子这种语气可以是亲切的,年长的用户应该是成熟稳定的。
设定要遵循的标准。
6STYLE控件风格,不要使用错误的控件,控件功能应该设计成与样式相同的控件,如果你没有能力设计一套控件,那么就使用标准控件,绝对不能不伦不类,杂乱无章,不要使用错误的控件,比如,用Button样式来做TTable功能,拿主菜单显示版权信息,统一类型的控件操作模式是一样的。
例如,双击一个控件可以执行某些操作,而双击同一个控件不会反映任何内容。
一个控件只执行一个功能。
它不会重复使用。
许多人喜欢在不同的情况下对不同的功能使用控件,以方便编写程序。
这些增加了用户最初理解的难度,并且只有在用户熟悉之后才能理解。
例如,如果您更改红色选项,左侧的参数表示不同的设置,这可能是因为为了节省控制或编程量,只有熟练的用户才会使用它。
在这种情况下,解决方案1是分组,使用双控件2并使用TABLE页面。
对用户来说,明显的视觉变化总结为1.产品生产者,并编写产品计划。
2.调查和分析用户体验研究员。
3.信息构建器,设计产品架构。
4.互动设计师,打造互动流程。
5.可视化设计器和用户界面设计器进行页面可视化设计。
6.前台工程师,前台开发。
7.背景工程师,背景开发。
8.用户体验研究员,做用户测试以确保质量。
1.确认目标用户在软件设计过程中,需求设计角色将确定软件的目标用户,并获得最终用户和直接用户的需求。
用户交互应该考虑不同目标用户导致的交互设计重点的差异。
例如,科学用户的设计重点不同于计算机输入用户。
2.设计目标一致的软件通常有多个组件(组件、元素)。
不同组件之间的交互设计目标需要一致。
例如,如果将计算机操作的主要用户作为目标用户,将简化的接口逻辑作为设计目标,那么目标需要将软件(软件包)作为一个整体来实现,而不是作为一个部分来实现。
3.元素外观一致交互元素的外观通常会影响用户的交互效果。
同一个(类)软件采用一致的外观风格,这对于保持用户焦点和提高交互效果有很大帮助。
遗憾的是,没有特别统一的测量方法来确认元素的外观一致性。
因此,有必要调查目标用户并获得反馈。
7.可用性原则7.1理解为了让软件被用户使用,用户必须能够理解对应于软件每个元素的功能。
如果用户不能理解,则有必要提供一种非破坏性的方式,以便用户能够通过元素的操作来理解其相应的功能。
例如,删除操作元素。
用户可以点击删除操作按钮,提示用户如何删除操作或是否确认删除操作。
用户可以更详细地理解与元素对应的功能,同时取消操作。
7.2可以得出用户是交互的中心,并且交互元素对应于用户所需的功能。
因此,交互元素必须是用户可控制的。
用户可以使用键盘、鼠标等交互设备来移动和触发现有的交互元素,以到达以前不可见或不交互的其他交互元素。
应该注意的是,交互的数量将影响可实现的结果。
当一个函数被深度隐藏时(通常超过4层),用户到达元素的概率大大降低。
可以达到的效果也与界面设计有关。
界面太复杂会影响可达到的结果。
(参考简单的指导原则)引用[第一阶段分析]
1、用户需求分析2、用户交互场景分析3、竞争产品分析这两者可以说是互补的。
对于更正式的项目,必须对用户的需求进行分析。
用户界面需求是一个重要的组成部分。
如果用户界面设计原则是所有用户界面设计的起点,那么用户界面需求就是这个设计的起点。
好的用户界面设计是基于对用户的深刻理解。
因此,对用户交互场景的分析非常重要。
对于大多数项目团队来说,他们可能没有时间和精力去真正调查用户现有的交互、并进行完美的交互模型调查,但是用户界面设计者在分析我是用户时需要什么时必须从用户的角度考虑。
竞争产品可以上市,并被用户界面设计师所知。
他们必须有自己的优势。
这就是所谓三个人必须有我的老师。
每个设计师的想法都有其局限性。
看别人的设计有绕过课堂的优势。
当然,有时可以参考的不一定是有竞争力的产品。
[二期设计]采用面向场景、面向事件和面向对象的设计方法。
用户界面设计侧重于交互,因此有必要设计终端用户的交互场景。
软件是一种交互式产品。
用户所做的是响应软件事件并触发内置在软件中的事件。
因此,有必要为事件设计。
当前程序开发的主流是面向对象的设计。
面向对象设计能有效体现面向场景和面向事件的特点。
交互对象、数据对象、事件(交互事件和异常)和动作[三期开发)四要素的设计最终通过用户交互案例图(解释用户和系统之间的联系)、用户交互流程图(解释交互和事件之间的联系)和交互功能设计图(解释功能和交互之间的对应关系)获得用户界面设计产品。
[第四阶段验证]正如在用户界面交互设计原则的讨论中提到的,用户界面产品的验证主要从以下几个方面开始
1、功能性优于用户界面设计,不能与需求不一致。
2、实用性内部测试的用户界面设计最重要的一点是实用性。
3、用户焦点小组用户界面设计卓越性的重要衡量标准。
最后,我想提几个其他问题。
现在人们通常认为交互设计和最终的用户界面效果设计可以完全分开。
这就像说需求可以完全从设计中分离出来,这是不可能的。
从最近的工作中可以得出一个结论,一个完整和标准化的过程是一个项目成败的关键。
对于用户界面设计的工作流程,我认为可以按照“市场分析-用户分析-架构-原型-界面-输出-完善”的主线来制定,用户界面设计师应该参与到每一个环节。
1.产品定位和市场分析大多由新产品研发部门和市场需求部门完成,但用户界面设计人员应了解产品的市场定位、产品定义、客户群、运营模式等。
2.对用户来说,研究和分析这个过程非常重要。
设计师应该找到合适的方法来完成这个过程。
您可以收集相关数据来分析目标用户的使用特征、情感、习惯、心、需求等。
,并提出用户研究报告和可用性设计建议。
这部分工作也可以在团队的配合下完成。
当时间和项目需求允许时,可以制定真实的用户分析。
3.架构设计这涉及大量的界面交互和流程设计。
根据可用性分析结果,制定交互模式、操作和跳转流程、结构、布局、信息等元素。
4.原型设计我认为这应该是一个小的阶段标志。
所有以前的工作都应该从设计的角度来实施。
根据进度和成本,样机可以控制在“手绘-图形-Flash-视频”的质量范围内。
原型的本质更像一个演示。
它不需要具备所有的功能,但应该体现设计对象的基本特征。
5.界面设计如果你喜欢图形界面设计,这里是你最喜欢的部分。
然而,你必须结合循环讨论的分析结果来设计你的工作,否则你的工作很难令人信服。
色调、风格、界面、窗口、图标、皮肤表情是这个链接的关键。
6.作为设计者的界面输出,在这部分工作中是与开发者合作完成相关的界面组合。
7.改进工作此链接由多个部门共同参与,包括可用性周期研究、用户体验反馈、测试反馈。
同时,用户界面人员也应该提出一些可行的改进建议。
许多设计师做他们不喜欢改变的事情,这是一个大禁忌。
上述过程可能在许多部门的参与下完成。
对于用户界面设计者来说,与团队合作并发挥他们应有的作用是非常重要的。
合格的用户界面设计者应该能够完成整个用户界面过程,而不仅仅是图形界面设计。
如何成为一名优秀的用户界面(interactiveinterface)设计师在谈到产品用户界面设计时,一般的理解是“图形界面设计”,产品交互设计往往被忽略。
一个好的交互设计对产品的成功起着关键的作用。
用户界面做的是用户第一次触摸的和普通用户只触摸的。
用户对界面的视觉效果和软件操作模式的易用性的关注远远超过了他对用什么样的代码来实现底层的关注。
如果一个程序是一个人的肌肉和骨骼,那么用户界面设计是一个成功的软件产品的重要组成部分。
对我来说,程序知道的不多,所以我只从用户界面设计和软件产品之间的关系以及如何使软件产品得到最好的用户界面设计的角度来谈。
目前,我们的软件产品存在一些技术问题,但是更多的问题来自于各个部门和各个项目团队之间的合作。
我们现有的开发过程一般是基于市场部门提出客户需求,产品设计师提出产品设计报告,开发部门设计开发计划。
每个团队单独开发一个模块,最后集成到一个完整的软件产品中。
在这些过程之间,用户界面设计应该参与哪个部分,每个部分应该在多大程度上实现产品的最佳用户界面设计效果?
我们将在下面的每个部分详细分析它。
首先,分析当前的问题。
在一些软件产业相对发达的国家,软件产品的用户界面设计过程贯穿于软件开发的全过程,是必不可少的。
然而,在中国产品的用户界面设计还没有被广泛接受,即使在第31页已经有了一个用户界面