400-616-5551

您所在位置: 首页> 学习课程> UI培训:UI设计基础知识普及篇

UI培训:UI设计基础知识普及篇

发布百知教育 来源:学习课程 2020-04-03

UI概念:

UI Design——uesr interface Design,顾名思义,就是用户界面设计。相较于传统的面向用户的视觉设计,UI的不同主要体现在其载体的不同(随着互联网普及而大规模的普及的电子载体设备——PC电脑端、移动终端手机)。

UI工作流程普及:

在互联网公司,UI工作执行者,就是所谓的UI设计师。从工作闭环的角度来说,他们的协作模式如下:

产品经理——基于市场需求提炼产品业务需求→需求转化为业务功能→创建业务模型,明确业务数据流转,以及业务流程流通→基于公司/产品战略,划定业务功能根据优先级;

设计师(UX/UI)——基于产品需求/业务功能→产品前端结构(线框图)(转化前提是基于目标用户研究,遵循用户的认知心理,尊重用户日常完成产品业务/功能的思维模式/行为习惯)→产品最终用户界面(高保真页面)(线框图到高保真页面的转化,主要体现在配色方案、页面布局以及系统交互方式);

开发工程师——前端工程师负责实现系统的高保真设计;后端工程师主要负责业务逻辑实现,数据库支持以及接口设计等后台工作;前端+后端共同实现应用系统;

测试(QA)——检测产品的实现模型&设计模型的匹配度;同时,设计师也需要参与后期的验收工作;

UI分类:

按照终端分类:PC端、移动端;

按照系统分类:Win系统、OSX系统;iOS系统、Android系统;

按照风格分类:拟物化、半扁平化、扁平化;

系统应用APP构成:(主要针对移动APP分析)

使用路径呈现顺序:

桌面启动icon→应用启动页→应用引导页(不是必须)→应用活动页(基于应用性质不同而不同)→应用首页

页面维度:

聚合页:

     组成:

    1. 产品完整功能的入口聚合地;

    2. 产品的第一层级信息内容呈现;

    作用:

    1. 产品功能导航;

    2. 产品用户分流;

    3. 产品整体映像呈现;

列表页:

    组成:

    1. 相同“类”内容的分组呈现;

    2. 内容的关键概要信息呈现;

    作用:

    1. 内容查看导航;

    2. 内容完整度罗列;

    3. 内容触达用户的先后顺序体现(内容的排序体现);

详情页:

    组成:

    内容详情信息完整呈现,图文并茂/图文+操作/……

    作用:

    1. 查看内容的完整信息;

    2. 某信息内容的全部操作;

    3. 完成数据最终流转

弹窗视图:

    模态视图、非模态视图两大类:

    模态视图类型:

    1. 警告视图;

    2. 二次确认视图;

    3. 工具/导航切换视图;

    非模态视图类型:

    1. 信息提示视图;

    2. 操作结果反馈视图(toast提示);

    作用:

    1. 提示信息的直接触达;

    2. 保持在当前页面,避免切换页面引起的用户的重新认知;

    3. 保证操作反馈/查看信息的连续性;

    弹窗视图,体现了反馈的及时性;主要用于内容较少但警示程度较高的提示;用于在聚合页面当前场景的多操作;

组成元素维度:

栏:

  • 状态栏——系统默认;

  • 导航栏——路标作用,用于指引用户当前在哪;可以去哪里;从哪里来;

  • 标签栏——应用系统的一级功能入口;用户对系统结构一目了然;

  • 工具栏——基于操作业务场景;不是必须有的。

视图:

  • 固定视图

  • 模态视图

控件:

  • 操作类:按钮、开关、分段控件等;

  • 状态类:进度条、状态标识符、图标等;

  • 信息内容承载容器类:卡片等

栏、视图、控件,是跟随操作系统的,均有相关的系统指南/规范,有标准可遵循;

规范/标准维度:

  1. 布局:

    在设计中,排版布局基本都遵循“栅格化“布局,保证页面整体布局整齐、规范、统一,一切看起来都比较有序;在设计中,我们也经常用到到”黄金分割比“,经过试验、调研,我们发现在植物界,很多植物的生长都遵循黄金分割比,譬如,向日葵花盘,他的螺旋线就遵循黄金分割比(顺时针:21条;逆时针:13条);动物界也一样,譬如人体就符合黄金分割比。大量的试验表明动植物界大多数都遵循黄金分割比,也符合人们的审美认知。但是,我们的设计为什么遵循以下排版布局规则,下一篇文章《UI认知篇——设计规则篇》将会从根本上解答设计准则的来源和为什么有效。

  2. 交互:

        页面内微交互:

      页面内微交互,主要体现在UI原色的以下效果体现:

    • 尺寸缩放、形状改变、颜色渐变、消失/出现等效果;元素的位移(基于一定路径改变位置);通过这样的动效,体现元素的重要性,吸引用户的注意力;

    • 元素间联动,通过联动动效,体现元素的关联性,从而实现视觉引导;

        页面间转场交互:

        页面间的转场交互主要有以下三种形式:

    • 直接切换——场景的直接对接;场景之间没有关联的线索,通过空间的直接对接,实现用户故事的链接;

    • 黑/白屏过渡——通过在页面场景中间增加黑/白屏过渡;借鉴与电影的黑/白屏转出过渡;

    • 页面UI元素的过渡转场——通过共同的UI元素,实现过渡转场,引导视线自然过渡;

    3. 配色:

        配色主要通过以下几方面去制定:主色、辅色、提亮色、灰色系(文案、背景、分割线、阴影等)。

    4. 文案:

        配色主要通过以下几方面去制定:文案的字体(系统内字体≤2种)、文案字号(常用:12、14、16、18、24、32、40)、文案字重(常用:Regular、medium、Bold)、文案颜色(常用:333333、666666、999999、eeeeee)。常用案例,只是常规用例,只用来参考借鉴,并不是规范或标准

    5. 图标:

        图标的规范主要通过以下方面执行:风格的统一性(主要面类、线类、线面类)、大小统一性(通过规范栅格去规范,iOS系统规范,Android有标准的全场景栅格规范)、细节的统一性(有没有倒角?直倒角?圆倒角?倒角半径保持一致性;线宽一致性;缺口一致性;);色彩一致性(纯色;渐变色;状态)


上一篇:零基础参加python培训需要学习多久?

下一篇:深圳java程序员待遇怎么样,就业机会多吗

相关推荐

关闭

立即申请

www.baizhiedu.com