UI设计初步



  • 一、以伏安表为例的UI设计流程

    前排提醒:规范的UI设计(界面设计)流程会经过用户调研、市场调研、用户画像、竞品分析等准备步骤。而本篇博客是以外包项目伏安表App为例,该项目准备工作已经由甲方做好,我们直接拿到需求文件,故略过不表。

    1. 由需求文件设计架构图

    一般情况下,甲方会提供一份需求文档,里面详细说明了想要实现的功能和版块。而我们首先要做的,就是通读文档,整理需求,将几十页的文档浓缩为一张架构图。在经过全员审核讨论后,对架构图进行修改,将其发给甲方,等待甲方确认,或根据甲方意见再次修改直到双方达成一致。

    架构图:类似思维导图,罗列出App的主要版块和每个版块下的具体功能,必要时包含交互。
    使用工具:XMind(仅供参考)。

    举例:下图为美团网App的架构
    0_1553316552887_f77baea71698440e3f5bf3af6260aa81.jpg

    以伏安表为例,前后设计有三版架构图才形成终稿:

    初稿:导航栏设计有五个版块(达设计规范上限)。

    0_1553316489148_伏安表_00.png

    一改:经讨论,将“数据”收入“我的”版块下,修改五个版块为四个,避免导航栏拥挤。

    0_1553316510802_伏安表_10.png

    终稿:架构图提交甲方后,甲方砍掉“测试>测试列表>新建>虚拟差流”一支,确定最终需求。

    0_1553316529049_伏安表_20.png

    2. 以架构图为基础设计线框图/原型图

    线框图是一种低保真且静态的呈现方式,设计师通常使用纸笔来表达自己的想法。只要能明确表达内容大纲,信息结构,布局,用户界面的视觉以及交互行为描述即可。就像建筑蓝图一样,蓝图也就是施工方案,详细描述改如何建造建筑。绘制线框图重点就是要快,明确表达自己的设计想法,它不是美术作品,无需过多的视觉效果。黑白灰则是它的经典用色。

    作者:Mockplus

    链接:https://www.zhihu.com/question/24412529/answer/397073799

    注:在单人开发或只是画给自己看的情况下,用纸和笔画草图就能满足需要(事实上这是我了解到的团队中采用的主流方式)。但在多人合作开发的时候,线框图能更好地帮助任务分工和项目推进。

    使用工具:Adobe XD CC、墨刀、PS、Sketch(仅Mac)等。

    举例:0_1553316611273_c5a94996a58b6b9fd72137515bf1079c.png

    0_1553316632812_472c38ed629a3d880a584fae1b1a2c4f.png

    在时间充裕的情况下,可以制作细节更多、中高保真、带有动态交互的原型图。

    原型图常用于做早期测试,以确保你的想法符合目标市场。在产品发布之前,没有原型和对用户的测试,这个产品注定是失败的。在原型设计阶段花费的时间,可以避免额外的工作和成本。相对于纸上的产品设计文档,产品原型更加有效,这样可以让所有的测试人员以及用户知道你产品的创意所在。

    作者:Mockplus

    链接:https://www.zhihu.com/question/24412529/answer/397073799

    下图为伏安表的部分工作流:

    0_1553316664457_伏安表工作流.png

    一份精细的设计图可以为后期开发节省大量的时间,以切图为例:

    团队使用工具蓝湖网(仅供参考)。

    0_1553316717730_切图.PNG

    设计师将原型图上传到蓝湖网后,开发人员可直接在网站上看到具体参数、相关界面代码并下载切图放到对应文件夹中,从而将精力集中在后台功能实现:

    0_1553316742261_尺寸.PNG

    3. 后续工作

    在线框图或原型图经过审核讨论和甲方确认后,开发人员就能着手开发了。

    其实伏安表作为一款目标用户单一、固定且专业性强的App在设计上并没有太高的要求,所以在线框图/原型图设计这一步我省略了大量的细节。一般情况下,配色方案(品牌色、辅助色、文字色等)、字体选择(字体、字号、行高等)、图标设计(尺寸、风格等)等都是在设计时应该考虑的细节。对于比较大的项目,甚至需要建立专门的设计规范和UI KIT,来保证多人协作情况下的高效率和风格的统一。

    二、学习推荐

    从目前了解到的团队定位来看,上述步骤已经能满足做项目的基本需求,且相关软件/网站操作的学习并不复杂,对团队里的人来说相信上手会更容易。因为目前团队里移动端方面常常是一人包揽从设计到开发的全过程,所以在设计要求不太高的情况下,了解了Android和IOS的基本设计规范,就能开始UI设计了。我整理了一些在伏安表UI设计过程中会用到的设计规范,包括底部导航、标签和按钮,仅供部分了解。

    更多设计规范请参考:material.io 里面还有免费icon和控件详解,推荐进行系统阅读。

    推荐学习文档:

    完整App界面设计时需要考虑的基本细节

    一款App的完整设计案例

    设计组件集合样例

    移动端设计项目总结

    推荐学习网站:

    ZCOOL站酷

    优设网

    三、部分设计规范

    前排提醒:先是文字叙述,再是具体图片分析。文字叙述看不懂的请先看图。这样分开主要是为了后期基本了解后进行查阅。

    1.底部导航

    基本规范

    1. 底部导航栏在屏幕底部显示三到五个目的地(应同等重要)。
    2. 表示底部导航目的地的方式取决于主题数量:
      • 三个目的地:显示所有目的地的图标和文本;
      • 四个目的地:当前目的地显示图标和文本,其余目的地显示图标,建议使用文本;
      • 五个目的地:当前目的地显示图标和文本,其余目的地使用图标,如果空间允许,则使用文本。
    3. 底部导航目的地始终应包含图标。最好将图标与文本标签配对,特别是图标没有明显含义的时候。
    4. 文字:使用简短有意义的描述,不要截断文字,不要缩小文本以适应单行,避免多行显示文本。
    5. 不要在底部导航栏中使用多个或低对比度颜色,这会使用户难以区分当前所在主题。
    6. 底部导航栏目的地位置固定,不要滚动或水平移动。
    7. 标签与底部导航组合使用时,应把标签缩小50%,否则可能引起混淆:标签共享一个主题,而底部导航的每个目的地彼此无联系且等级最高。

    实例

    img

    Right:四个目的地时,当前目的地显示图标和文本,其余目的地显示图标;当前主题与其余主题使用对比度高的颜色进行区分

    img

    Wrong:标签应缩小50%

    img

    Wrong:不要截断文字

    img

    Wrong:不要缩小文本以适应单行

    img

    Warn:不要多行显示文本

    img

    Warn:不要在底部导航栏使用多个颜色,或当前主题与其余主题颜色对比度不高,这会使用户难以区分当前所在主题

    img

    Wrong:底部导航栏不要水平移动或滑动

    2.标签

    基本规范

    1. 除非需要,否则不要截断标签,因为截断的文本会妨碍理解。不要调整文本标签的大小以使它们适合单行。如果标签太长,请将文本换行到第二行(固定标签)或使用可滚动选项卡。
    2. 可滚动选项卡限制文本为一行,一次显示所有选项卡的子集,每个选项卡的宽度由其文本标签的长度定义。
    3. 要区分活动选项卡和非活动选项卡,请将下划线和颜色更改应用于活动选项卡的文本和图标。用户可以通过点击标签或在内容上执行滑动手势来在标签之间导航。
    4. 不要将标签附加到底部导航,因为它可能会导致对哪些操作或标签控制哪些内容产生混淆。
    5. 固定标签的宽度相等,可以按以下方式计算:
      • 屏幕宽度除以标签数量
      • 最长标签的宽度
    6. 使用固定标签时,请确保不会截断文本。一次不要使用四个以上的固定标签。
    7. 群集固定标签不会在屏幕上平均分配。标签栏居中,右对齐或左对齐。
    8. 不要使用标签来移动需要按特定顺序阅读的顺序内容。
    9. 避免使用标签来比较同一类型的相似内容,例如同一项目的不同大小。
    10. 在移动设备和桌面设备上,偏移左侧的第一个选项卡以表示选项卡可滚动。
    11. 不要将仅包含文本的选项卡与仅包含图标的选项卡混合使用。在所有标签上使用所有文本标签/所有图标标签/两者。
    12. 避免在另一个选项卡中嵌套选项卡。
    13. 不要将标签放在彼此之下。
    14. 避免在每个选项卡上使用不一致的填充。

    实例

    img

    Right:标签可以包含图标和文字。文字标签应该很短。

    img

    Wrong:不要使用标签来移动需要按特定顺序阅读的内容。

    img

    Right:将标签显示为相关内容上方的单行。

    img

    Warn:避免使用标签来比较同一类型的相似内容,例如同一项目的不同大小。

    img

    Warn:虽然标签文本可以换行到第二行,但可滚动选项卡将文本限制为单行。

    img

    Wrong:不要调整文本标签的大小以使它们适合单行。如果标签太长,请将文本换行到第二行(固定标签)或使用可滚动选项卡。

    img

    Warn:除非需要,否则不要截断标签,因为截断的文本会妨碍理解。

    img

    Wrong:不要将仅包含文本的选项卡与仅包含图标的选项卡混合使用。

    img

    Wrong:不要仅在某些选项卡上使用带有图标和文本标签的选项卡。

    img

    Right:将下划线和颜色更改应用于当前选项卡的文本和图标,以此区分当前选项卡和其余选项卡。

    img

    Wrong:避免在另一个选项卡中嵌套选项卡。

    img

    Wrong:不要将标签放在彼此之下。

    img

    Wrong:不要将标签附加到底部导航,因为它可能会导致对哪些操作或标签控制哪些内容产生混淆。

    img

    Right:使用固定标签时,请确保不会截断文本。一次不要使用四个以上的固定标签。

    img

    Warn:避免让固定标签与内容混淆。这些选项卡宽度与此布局中的列紧密对齐,因此选项卡和内容之间的关系可能会被误解。

    img

    Right:使用群集固定选项卡

    img

    Right:群集中的固定选项卡可以向左或向右对齐。在更宽的布局上,选项卡可以在选项卡栏上居中。

    img

    Right:在移动设备和桌面设备上,偏移左侧的第一个选项卡以表示选项卡可滚动

    img

    Wrong:避免在每个选项卡上使用不一致的填充

    3.按钮

    类型

    img

    1. 文本按钮(低强调)
      文本按钮通常用于不太重要的操作。
    2. 描框按钮(中等强调)
      由于笔划,概述按钮用于比文本按钮更强调。
    3. 填充按钮(高强调)
      填充按钮更加强调,因为它们使用颜色填充和阴影。
    4. 切换按钮
      切换按钮使用布局和间距对一组操作进行分组。它们的使用频率低于其他按钮类型。

    放置

    img

    此屏幕布局使用:

    1. 最重要的扩展浮动动作按钮
    2. 一个高强调的填充按钮
    3. 低强调的文本按钮

    基本规范

    1. 默认情况下,使用大写按钮文本(对于具有大小写的语言)。这是为了区分文本标签和周围文本。如果文本按钮不对按钮文本使用大小写,请找到另一个特征以区分它,例如颜色,大小或位置。
    2. 为了最大程度的易读性,文本标签应保留在一行中。
    3. 使用多个按钮时,请确保一个按钮的可用状态看起来不像另一个按钮的禁用状态。
    4. 在底栏中,当使用多个按钮时,使用不同类型的按钮来指示更重要的操作。避免使用多个颜色不同的填充按钮。
    5. 如果有空间将按钮并排放置,请勿在另一个按钮下方放置按钮。
    6. 文本按钮中避免使用太长的文本标签,应简明扼要。
    7. 不要在填充按钮的中心垂直对齐图标和文本;不要在同一个按钮中使用两个图标。

    实例

    img

    Wrong:多行按钮文本不易读

    img

    Right:只要按钮与周围的元素清晰可辨,文本标签就可以用句子写成。

    img

    Wrong:不要在填充按钮的中心垂直对齐图标和文本

    img

    Wrong:不要在同一个按钮中使用两个图标。

    img

    img

    img

    Right:用不同类型的按钮来指示不同重要性的操作

    img

    Wrong:如果没有相同的填充颜色,避免使用两个填充按钮。

    img

    Wrong:不要在另一个按钮下方放置按钮。

    img

    Wrong:避免使用太长的文本标签。他们应该简明扼要。

    四、小结

    (非常粗糙的UI设计流程讲解和学习资料分享?

    本博客主要介绍了App开发的前期设计流程和部分基本的设计规范,仅供新手学习了解。

    欢迎指正。



  • 设计规范这事情还是要看系统,Android的material design与iOS的规范是有较大区别的。实例中的第一个更偏向于iOS的tab bar。这个东西反而需要看各家的文档来确定。



  • @linekm 我一直没登抱歉QAQ
    没错,material里面IOS和Android规范不一样的地方是会分开描述的,比如IOS里面返回之后是停留在上次浏览位置,但Android里面这样的效果就需要自己实现


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.