UI设计初步
-
一、以伏安表为例的UI设计流程
前排提醒:规范的UI设计(界面设计)流程会经过用户调研、市场调研、用户画像、竞品分析等准备步骤。而本篇博客是以外包项目伏安表App为例,该项目准备工作已经由甲方做好,我们直接拿到需求文件,故略过不表。
1. 由需求文件设计架构图
一般情况下,甲方会提供一份需求文档,里面详细说明了想要实现的功能和版块。而我们首先要做的,就是通读文档,整理需求,将几十页的文档浓缩为一张架构图。在经过全员审核讨论后,对架构图进行修改,将其发给甲方,等待甲方确认,或根据甲方意见再次修改直到双方达成一致。
架构图:类似思维导图,罗列出App的主要版块和每个版块下的具体功能,必要时包含交互。
使用工具:XMind(仅供参考)。举例:下图为美团网App的架构
以伏安表为例,前后设计有三版架构图才形成终稿:
初稿:导航栏设计有五个版块(达设计规范上限)。
一改:经讨论,将“数据”收入“我的”版块下,修改五个版块为四个,避免导航栏拥挤。
终稿:架构图提交甲方后,甲方砍掉“测试>测试列表>新建>虚拟差流”一支,确定最终需求。
2. 以架构图为基础设计线框图/原型图
线框图是一种低保真且静态的呈现方式,设计师通常使用纸笔来表达自己的想法。只要能明确表达内容大纲,信息结构,布局,用户界面的视觉以及交互行为描述即可。就像建筑蓝图一样,蓝图也就是施工方案,详细描述改如何建造建筑。绘制线框图重点就是要快,明确表达自己的设计想法,它不是美术作品,无需过多的视觉效果。黑白灰则是它的经典用色。
作者:Mockplus
链接:https://www.zhihu.com/question/24412529/answer/397073799
注:在单人开发或只是画给自己看的情况下,用纸和笔画草图就能满足需要(事实上这是我了解到的团队中采用的主流方式)。但在多人合作开发的时候,线框图能更好地帮助任务分工和项目推进。
使用工具:Adobe XD CC、墨刀、PS、Sketch(仅Mac)等。
举例:
在时间充裕的情况下,可以制作细节更多、中高保真、带有动态交互的原型图。
原型图常用于做早期测试,以确保你的想法符合目标市场。在产品发布之前,没有原型和对用户的测试,这个产品注定是失败的。在原型设计阶段花费的时间,可以避免额外的工作和成本。相对于纸上的产品设计文档,产品原型更加有效,这样可以让所有的测试人员以及用户知道你产品的创意所在。
作者:Mockplus
链接:https://www.zhihu.com/question/24412529/answer/397073799
下图为伏安表的部分工作流:
一份精细的设计图可以为后期开发节省大量的时间,以切图为例:
团队使用工具:蓝湖网(仅供参考)。
设计师将原型图上传到蓝湖网后,开发人员可直接在网站上看到具体参数、相关界面代码并下载切图放到对应文件夹中,从而将精力集中在后台功能实现:
3. 后续工作
在线框图或原型图经过审核讨论和甲方确认后,开发人员就能着手开发了。
其实伏安表作为一款目标用户单一、固定且专业性强的App在设计上并没有太高的要求,所以在线框图/原型图设计这一步我省略了大量的细节。一般情况下,配色方案(品牌色、辅助色、文字色等)、字体选择(字体、字号、行高等)、图标设计(尺寸、风格等)等都是在设计时应该考虑的细节。对于比较大的项目,甚至需要建立专门的设计规范和UI KIT,来保证多人协作情况下的高效率和风格的统一。
二、学习推荐
从目前了解到的团队定位来看,上述步骤已经能满足做项目的基本需求,且相关软件/网站操作的学习并不复杂,对团队里的人来说相信上手会更容易。因为目前团队里移动端方面常常是一人包揽从设计到开发的全过程,所以在设计要求不太高的情况下,了解了Android和IOS的基本设计规范,就能开始UI设计了。我整理了一些在伏安表UI设计过程中会用到的设计规范,包括底部导航、标签和按钮,仅供部分了解。
更多设计规范请参考:material.io 里面还有免费icon和控件详解,推荐进行系统阅读。
推荐学习文档:
推荐学习网站:
三、部分设计规范
前排提醒:先是文字叙述,再是具体图片分析。文字叙述看不懂的请先看图。这样分开主要是为了后期基本了解后进行查阅。
1.底部导航
基本规范
- 底部导航栏在屏幕底部显示三到五个目的地(应同等重要)。
- 表示底部导航目的地的方式取决于主题数量:
- 三个目的地:显示所有目的地的图标和文本;
- 四个目的地:当前目的地显示图标和文本,其余目的地显示图标,建议使用文本;
- 五个目的地:当前目的地显示图标和文本,其余目的地使用图标,如果空间允许,则使用文本。
- 底部导航目的地始终应包含图标。最好将图标与文本标签配对,特别是图标没有明显含义的时候。
- 文字:使用简短有意义的描述,不要截断文字,不要缩小文本以适应单行,避免多行显示文本。
- 不要在底部导航栏中使用多个或低对比度颜色,这会使用户难以区分当前所在主题。
- 底部导航栏目的地位置固定,不要滚动或水平移动。
- 标签与底部导航组合使用时,应把标签缩小50%,否则可能引起混淆:标签共享一个主题,而底部导航的每个目的地彼此无联系且等级最高。
实例
Right:四个目的地时,当前目的地显示图标和文本,其余目的地显示图标;当前主题与其余主题使用对比度高的颜色进行区分
Wrong:标签应缩小50%
Wrong:不要截断文字
Wrong:不要缩小文本以适应单行
Warn:不要多行显示文本
Warn:不要在底部导航栏使用多个颜色,或当前主题与其余主题颜色对比度不高,这会使用户难以区分当前所在主题
Wrong:底部导航栏不要水平移动或滑动
2.标签
基本规范
- 除非需要,否则不要截断标签,因为截断的文本会妨碍理解。不要调整文本标签的大小以使它们适合单行。如果标签太长,请将文本换行到第二行(固定标签)或使用可滚动选项卡。
- 可滚动选项卡限制文本为一行,一次显示所有选项卡的子集,每个选项卡的宽度由其文本标签的长度定义。
- 要区分活动选项卡和非活动选项卡,请将下划线和颜色更改应用于活动选项卡的文本和图标。用户可以通过点击标签或在内容上执行滑动手势来在标签之间导航。
- 不要将标签附加到底部导航,因为它可能会导致对哪些操作或标签控制哪些内容产生混淆。
- 固定标签的宽度相等,可以按以下方式计算:
- 屏幕宽度除以标签数量
- 最长标签的宽度
- 使用固定标签时,请确保不会截断文本。一次不要使用四个以上的固定标签。
- 群集固定标签不会在屏幕上平均分配。标签栏居中,右对齐或左对齐。
- 不要使用标签来移动需要按特定顺序阅读的顺序内容。
- 避免使用标签来比较同一类型的相似内容,例如同一项目的不同大小。
- 在移动设备和桌面设备上,偏移左侧的第一个选项卡以表示选项卡可滚动。
- 不要将仅包含文本的选项卡与仅包含图标的选项卡混合使用。在所有标签上使用所有文本标签/所有图标标签/两者。
- 避免在另一个选项卡中嵌套选项卡。
- 不要将标签放在彼此之下。
- 避免在每个选项卡上使用不一致的填充。
实例
Right:标签可以包含图标和文字。文字标签应该很短。
Wrong:不要使用标签来移动需要按特定顺序阅读的内容。
Right:将标签显示为相关内容上方的单行。
Warn:避免使用标签来比较同一类型的相似内容,例如同一项目的不同大小。
Warn:虽然标签文本可以换行到第二行,但可滚动选项卡将文本限制为单行。
Wrong:不要调整文本标签的大小以使它们适合单行。如果标签太长,请将文本换行到第二行(固定标签)或使用可滚动选项卡。
Warn:除非需要,否则不要截断标签,因为截断的文本会妨碍理解。
Wrong:不要将仅包含文本的选项卡与仅包含图标的选项卡混合使用。
Wrong:不要仅在某些选项卡上使用带有图标和文本标签的选项卡。
Right:将下划线和颜色更改应用于当前选项卡的文本和图标,以此区分当前选项卡和其余选项卡。
Wrong:避免在另一个选项卡中嵌套选项卡。
Wrong:不要将标签放在彼此之下。
Wrong:不要将标签附加到底部导航,因为它可能会导致对哪些操作或标签控制哪些内容产生混淆。
Right:使用固定标签时,请确保不会截断文本。一次不要使用四个以上的固定标签。
Warn:避免让固定标签与内容混淆。这些选项卡宽度与此布局中的列紧密对齐,因此选项卡和内容之间的关系可能会被误解。
Right:使用群集固定选项卡
Right:群集中的固定选项卡可以向左或向右对齐。在更宽的布局上,选项卡可以在选项卡栏上居中。
Right:在移动设备和桌面设备上,偏移左侧的第一个选项卡以表示选项卡可滚动
Wrong:避免在每个选项卡上使用不一致的填充
3.按钮
类型
- 文本按钮(低强调)
文本按钮通常用于不太重要的操作。 - 描框按钮(中等强调)
由于笔划,概述按钮用于比文本按钮更强调。 - 填充按钮(高强调)
填充按钮更加强调,因为它们使用颜色填充和阴影。 - 切换按钮
切换按钮使用布局和间距对一组操作进行分组。它们的使用频率低于其他按钮类型。
放置
此屏幕布局使用:
- 最重要的扩展浮动动作按钮
- 一个高强调的填充按钮
- 低强调的文本按钮
基本规范
- 默认情况下,使用大写按钮文本(对于具有大小写的语言)。这是为了区分文本标签和周围文本。如果文本按钮不对按钮文本使用大小写,请找到另一个特征以区分它,例如颜色,大小或位置。
- 为了最大程度的易读性,文本标签应保留在一行中。
- 使用多个按钮时,请确保一个按钮的可用状态看起来不像另一个按钮的禁用状态。
- 在底栏中,当使用多个按钮时,使用不同类型的按钮来指示更重要的操作。避免使用多个颜色不同的填充按钮。
- 如果有空间将按钮并排放置,请勿在另一个按钮下方放置按钮。
- 文本按钮中避免使用太长的文本标签,应简明扼要。
- 不要在填充按钮的中心垂直对齐图标和文本;不要在同一个按钮中使用两个图标。
实例
Wrong:多行按钮文本不易读
Right:只要按钮与周围的元素清晰可辨,文本标签就可以用句子写成。
Wrong:不要在填充按钮的中心垂直对齐图标和文本
Wrong:不要在同一个按钮中使用两个图标。
Right:用不同类型的按钮来指示不同重要性的操作
Wrong:如果没有相同的填充颜色,避免使用两个填充按钮。
Wrong:不要在另一个按钮下方放置按钮。
Wrong:避免使用太长的文本标签。他们应该简明扼要。
四、小结
(非常粗糙的UI设计流程讲解和学习资料分享?
本博客主要介绍了App开发的前期设计流程和部分基本的设计规范,仅供新手学习了解。
欢迎指正。
-
设计规范这事情还是要看系统,Android的material design与iOS的规范是有较大区别的。实例中的第一个更偏向于iOS的tab bar。这个东西反而需要看各家的文档来确定。
-
@linekm 我一直没登抱歉QAQ
没错,material里面IOS和Android规范不一样的地方是会分开描述的,比如IOS里面返回之后是停留在上次浏览位置,但Android里面这样的效果就需要自己实现