本篇文章给大家谈谈ui信息架构,以及UI设计框架对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
在一个常规互联网团队里,产品策划、交互设计、UI设计分别代表2-3种角色能力。细分的团队,三者分别对应PM、交互设计师、UI设计师(注意不是视觉设计师);粗放的团队,可能只有PM、设计师,交互部分则多数归到PM名下。
到现在,不同深度的体验过这三种角色后,我倾向于把这三者统称为「产品设计」能力,也许更符合未来的发展需要。
先说产品策划,有一个误区,不是只有叫产品经理的人,才能做这个事情。创业公司的老板,业务线经理,甚至技术经理都可能扮演这个角色,只要他具备相应合格的能力或权力,那「需求」就可以由这个人输出。
只不过,受惠于互联网思维、人人产品思维的普及,所有公司都知道了设置产品经理这个专门角色的必要性。事实也证明,受过专业训练的人,专门提供此项智力资源,比其他角色兼任,效率会更高。
原型与交互,其实是两个层次的东西。原型更多是产品经理对于产品方案的框架思路表达,交互则包含完整的产品结构与用户的配合关系,细节到一个提示语的设定。
按理说,交互设计更偏设计能力,需要有设计背景的人来做,而目前的大部分PM都不是设计相关背景出来的。但交互跟产品架构高度关联,要把交互设计环节做好,需要充分理解产品经理的方案和思路,如果有两个角色来做,除非两个人特别默契,大部分时候,交互设计师的东西都是不能完全体现产品方案的。
那么不如PM自己来做交互,自己最清楚自己的产品,需要怎样的交互方案去承载需求的落地实现。减少一个角色,减少信息传递丢失,让产品方案与交互方案充分适配。这是PM来承担交互的好处。
坏处是,在交互工作中最重要的信息架构部分,对没有专业设计知识背景支撑的PM,算一个不小的挑战。所以我们会看到,很多PM做出来的交互,总感觉有些地方「不正规」。这部分能力的锻炼,我认为是现在以及未来PM的一个重点。
做好交互设计的前提是做好信息架构。
信息架构怎么出来的?产品架构确定后,可选的信息架构方案就出来了,什么样的业务产品,适合的信息架构方案就那么几种,根据自己的掌握程度和开发成本,综合评估选择。
信息架构确定后,基本上关键的交互框架就也出来了,剩下的任务只是把各个交互环节关联起来,为各模块的选择合适的交互方案。现今市面上,大大小小的交互方案基本都很成熟,可以直接复用,不需要我们再去造轮子摸索。比如APP的底栏bar方案,几乎是目前手机屏幕上最高效的导航方式。
交互设计确定后,UI设计师登场。这也是最容易被大家倾注过多注意力的地方。每个人都有自己的审美,对于UI设计方案的评判,显然不是来自于谁的审美,除了老板喜欢。
UI设计最重要的任务是将交互设计的功效放大,好看不是第一原则,甚至不是前三的原则。不能为了好看,反过来去牺牲交互效率,甚至本末倒置修改产品方案。比如最简单的登录界面,交互确定好操作层级,UI从颜色、布局、大小等维度去突出交互任务优先级,让用户一秒钟知道这个界面的作用入口在哪儿。
只要UI设计完成了交互的显性呈现,那么可以说80%的任务已经完成。剩余10%可以是传达产品气质,产品气质反映产品价值,对新产品来说,如果让用户最快最清晰的get到你的价值所在,留下一个产品印象以便于在众多竞品中选择你。
但是想想,这个宏伟的目标,让UI来背负,实在过于奢望了。保持一个设计水准,获得业界口碑,为吸引人才增加一些亮点,或许更实际一些。
还剩10%,可以是老板的喜好,或者留给设计师,作为个人技法的表现空间,为这一段工作履历增加一些实际案例。
以上这一个产品设计过程,如果以最终的UI效果作为产品的感性水平,即背锅分配,那么产品策划部分至少要占50%,交互占30%,UI占20%。
也就是,一个产品的综合设计水平,如果没有交互设计师,PM要背80%以上的锅。
这样的背景下,评价一个UI部分做的好不好,还有多大意义呢。有交互设计能力的UI设计师,倒可以给一个烂架构的产品加分,但那也只是60跟75的区别,绝对没法腐朽化神奇到90分。
话说回来,在互联网用户争夺更加激烈的趋势下,纯产品经理或纯交互设计的角色价值不断被冲击,如何保证「产品设计」环节的效果,谁来提供这部分价值,最该思考,也最有危机的,也许就是我们产品锅锅了。
UI设计是一个课程大类,包含的小科目很多,比如平面设计、网页设计、电商设计、UI交互设计等等。接下来我们分别讲一些每个科目的培训课程内容。
一、平面设计平面
设计分为两个阶段,在第一阶段视觉设计基础中会学习UI行业概述与课程介绍、PS软件入门与PS基础抠图、钢笔抠图、钢笔绘图、扁平图标与写实图标绘制、画笔工具制作噪点插画、PS高级抠图与人物精修、蒙版、调色、滤镜、商业海报制作、AI软件入门与基础工具操作、AI绘图功能基本操作、制作矢量元素与图标、AI画笔工具/颜色、混合工具/文字/段落工具/符号工具制作立体效果海报、AI的3D效果与偏移路径效果制作综合海报、AI综合使用及提升等课程。第二阶段品牌运营视觉设计中会学到现代素描与光影、手绘ICON、手绘商业插画与创意设计、图形形态创意与插画角色设计、插画实战项目解析与应用、字体设计、品牌概念认知、品牌LOGO创意、品牌形象设计及应用延展、品牌宣传物料设计、线上品牌宣传设计、项目整合与答辩等。
二、网页设计
网页设计课程也分为两个阶段,在第一阶段中会学到行业概述与学前准备、Photoshop图像处理软件、illustrator矢量图形处理软件、CINEMA 4D 三维立体软件、矢量插画绘制等课程。在第二阶段中会学习网站概述、网页设计与制作介绍、电商设计与店铺装修、web界面—专题设计、web网站布局与专题制作、企业网站设计与制作、后台系统设计、WAP网站设计、H5新媒体运营设计。三、电商设计电商设计课程则包含电商概论、产品拍摄技巧与后期精修、C4D三维场景与PS高级合成海报打造、打造高点击主图、产品详情页设计之提炼卖点、高品质视觉营销店铺首页、大促营销策划与专题页面视觉呈现、推广图引爆流量、项目整合与答辩等。四、UI交互设计UI交互设计课程也有两个阶段,在第一阶段产品交互UI设计中,要学习Sketch软件实操、项目全流程介绍、项目产品认知、交互设计入门、交互设计方法、PC端与移动端项目交互原型图、项目原型设计答辩、PC及移动端界面设计流行趋势、ICON图标设计、PC端设计规范及界面设计、移动端设计规范及界面设计、切图标注、高保真交互、整套项目答辩、电视、小程序、项目整合与答辩等课程。第二阶段UI项目实战进阶中,则要学习设计师职业发展管理与项目思维复盘、作品品牌思维的要点、数据思维指导营销设计
四、 在理论方面:设计心理学、色彩心理学、创意心理学、视觉分析报告、图像设计基本知识、UI理论、认识用户界面、用户调研、GUI原生系统界面设计规范等等。
通用 UI 组件使网站和应用程序更易于使用。通过使用通用组件,用户不必猜测如何与界面交互——他们可以识别每个元素应该做什么。
折叠面板、列表和图表等 UI 组件可以让用户更轻松地消化信息。面包屑和分页等组件将用户定向到他们在网站或应用程序中的位置。还有其他组件,例如选择器或滑块,可以更轻松地与界面交互。
折叠面板 是折叠的内容块堆栈,单击时会显示隐藏的内容。它们通常用于常见问题解答等,其中多个相关内容应包含在同一页面上,但一次显示它们可能会让用户感到沮丧。关闭时,它们仅显示标题(通常是问题)并在用户单击后显示完整内容。
对打开和关闭的部分使用不同的图标。
杂货清单、新年愿望、遗愿清单——如果你能说出它的名字,可能会有一个清单。在设计界, 列表 有助于排列相关元素,例如文本或图像。
列表可以按字母顺序、时间顺序或数字顺序排列,并用项目符号或图标进行标记。用户喜欢它们,因为它们很容易被扫描以找到所需的信息。
确保对齐列表并在选项之间添加足够的空白以让它们呼吸。易读性是关键!
术语 面包屑 指的是看起来像一排链接的辅助导航元素。就像在 Hansel 和 Gretel 的故事中一样,面包屑会留下痕迹来引导用户并帮助他们回家。
最后一个元素表示用户的当前位置,其余元素表示他们到达那里的路径。如果用户深入到网站并远离主页,面包屑可以帮助他们了解自己的位置并找到返回的路。
当前页面应该始终是路径中的最后一个碎屑。
分页 是信息架构的基本组成部分。它在网页设计中很普遍,出现在许多网络应用程序中。
分页将内容分成可消化的部分——页面——并帮助用户浏览界面。当页面出现在物理世界中的书籍、杂志和其他书面材料中时,它们很容易被用户识别。期望在电子商务网站或您的收件箱上看到分页。
页面的顶部和底部是最常见的分页位置。
线条是设计师用来分隔内容组中不同元素的最常见的视觉 分隔线 类型。它们支持视觉层次结构并帮助用户扫描相关的信息块。
颜色、空白、图像或阴影是线条的绝佳替代品,线条会产生过多的视觉噪音。
通知 是提醒用户有关更新或操作的系统消息,例如新消息或成功发送电子邮件的确认。它们采用徽标数、全局提示或覆盖横幅的形式,其主要目的是吸引用户的注意力。
在设计界, 标签 (又名chips)是紧凑的文本元素,可以提供多种功能。它们允许我们标记、分类、选择、过滤或触发动作。
那么为什么是“chips”呢?谷歌的 Material Design 引入了这个术语,现在它可以与“标签”这个词互换使用(尽管“chips”也可以指代标签之外的元素)。
选择器是选择日期范围、时间段或两者的完美工具。单击时,它们会展开为模态框或对话框,并向用户提供一组可供选择的选项。
用户乍一看应该很明显当前日期和选定日期。另外,不要限制用户的选择;允许他们键入日期而不是滚动和选择。有时,打字要容易得多。
禁用不可用的选项——例如,过去或不可用的日期——以防止用户错误和摩擦。
图表 是任何仪表盘的重要组成部分,因为它们使我们能够可视化和比较数据。图表有多种形式——堆积面积图、柱形图、饼图等等。
选择正确的图表类型不是品味问题。这取决于您拥有多少数据类别以及图表的用途。例如,饼图不适合比较超过 5 个切片。对于用户来说,它变得过于拥挤且难以阅读。
大多数人在尝试将您的 Instagram 提要加载到 3G 网络上之前都不会考虑太多关于 加载程序的问题 。加载器是通知用户加载过程的元素。进度条、微调器和骨架屏是向用户指示存在延迟的最常见方式。
为了减少挫败感,请添加对用户需要等待的原因的解释,并指出可能需要多长时间。
文字提示 是不能单独存在的简短、信息丰富的消息——它们总是与交互式元素配对,例如图标、按钮或文本链接。文字提示由用户触发,并在鼠标悬停或单击或通过键盘悬停时显示。
不要将文字提示变成唯一的解释来源。它们是提供额外帮助和提供额外信息的好伙伴,但用户应该能够在没有它们的情况下完成任务。
一个好的文字提示简短、简洁且有用。最好的文字提示是您从未真正需要的文字提示。
滑块 是用于选择值或值范围的现成解决方案。通过水平拖动手柄(也称为“拇指”),用户可以设置价格范围或选择一个数字。一些滑块包含一个浮动值,该值会随着用户拖动拇指而更新。
在移动设备上使用滑块时,请确保拇指足够大并且易于定位和拖动。
请记住,对于有运动障碍的人来说,滑块可能很难控制。
千里之行,始于足下。 进度跟踪器 向用户显示他们已经采取了多少步骤以及还剩下多少步骤。他们一步一步地指导我们,将大表格分成更小的块,并鼓励我们完成每一步。
向进度跟踪器添加文本以指示流程中的每个步骤包括的内容对用户很有帮助,并鼓励他们继续旅程。
避免超过 5 步的旅程。
关于ui信息架构和UI设计框架的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,欢迎发送邮件至举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
标签: #ui信息架构
相关文章