返回

从零开始学 UI

#设计知识
#知识库
7%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库设计知识从零开始学 UI

UI 界面设计所需的技能解析

UX百科编辑部 编辑于 2023-12-1297人正在学
90

UI 设计的主要对象是针对可交互界面的设计,想要实现优秀的界面设计效果,就需要具备以下几种能力:

  1. UI软件的使用
  2. 系统设计规范认识
  3. 主流的控件、组件掌握
  4. 界面的布局和排版
  5. 配色的逻辑和应用
  6. 图标的独立设计能力
  7. 项目设计规范定义

在开始学习 UI 的专业知识之前,我们要先对这些能力有初步的认识和判断,下面对它们分别进行解释。

1.UI 软件的使用

要完成界面的设计就必然要使用数字化软件进行操作和输出,虽然UI设计从形式表现上属于平面设计的一种,但发展出了专门针对UI设计的软件,如 Sketch、Figma、即时设计等。

只要掌握其中一款,就基本可以无缝上手其它软件。

而页面中一些复杂的元素,如广告图、装饰图标等,则会使用 PS 或 AI 等平面软件去完成。

2.系统设计规范认识

UI 设计的对象多数是在不同智能系统中运行的软件,这些软件会受系统本身的特征、技术、规则影响和限制,设计师需要在这个范围中进行设计,而不能随心所欲的发挥。

这些要求就是系统的设计规范,在本套分享中,将重点解释移动端的 iOS 和 Android 系统设计规范。

3.主流的控件、组件掌握

UI 界面作为可交互的页面,包含很多通用的交互控件,如按钮、开关、步进器、输入框、下拉菜单等。系统规范都会提供这些常见、通用的控件。

除此外,在 UI 行业的发展中,根据产品、业务的需要也发展出很多通用的模块,如轮播广告、快速入口、瓷片区、商品卡片、动态卡片等常见组件。

UI 界面就是控件+组件组装而成,所以要做好 UI 界面的设计,就需要在了解它们的基础上,做出大量针对性的练习。

4.界面的布局和排版

除了组件外,移动端产品也形成了很多相对标准的页面类型,如综合型首页、分类页、表单页、详情页、列表页、设置页等。

整个 APP 项目由这些页面组成,而这些常见页面都包含了相对固定的组件、布局、排版、样式逻辑,需要设计师去总结并掌握其中的规律。

对于专业的 UI 设计来讲,页面设计能力和项目设计能力不是同一件事,设计师需要先通过提升页面设计能力,才能驾驭整个项目的设计。网上大量的飞机稿案例,就是不同设计师为了提升界面设计能力所做出的练习。

5.配色的逻辑和应用

配色也是 UI 设计中的重要组成部分,而它的优先级之所以排在后面,是因为 UI 设计的流程是先排版后上色,即使只用黑白灰也足以输出优秀的界面。

同时,UI 中的配色又受限于 RGB 的色彩显示逻辑,配色的方法非常的粗暴、单一、简单,相对于传统平面的配色有很大的差异,无法照搬传统平面的配色逻辑和理论。

不用担心缺乏美术积累,只要掌握这些配色的 “套路” 就可以快速上手 UI 的配色。

6.图标的独立设计能力

图标是UI界面中的核心组成元素之一,随着行业的发展,出现了大量的图标素材库,让设计师可以非常容易的获取和使用免费的图标素材,比如 iconfont、iconpark、Material Icon、SF Symbol 等以及各大设计资源社区。

但设计师不能光依赖素材,在真实工作环境中的个性化图标需求往往是素材库无法覆盖的,必须由设计师独立完成。

尽量在完成前面的任务以后再预留出一段时间进行专项的训练,才能有效的提升图标设计的认识和能力。

7.项目设计规范定义

任何成熟、优秀的项目,都应该包含统一的调性和风格,为用户提供更好的使用体验,而这就是设计规范要发挥的作用。 UI设计师通过制定界面中使用的色彩字体、样式、控件、组件等内容,来确保不同页面之间能建立统一的视觉语言和共性。

设计师在具备完整的界面设计能力之后,就可以结合 UI 软件相关的样式、组件功能,提升构建全局设计系统的能力。

点赞
收藏
学会
11689097
下一篇: UI 设计的软件介绍
UI 设计类软件,就是开发出来专门用于 UI 界面设计的软件工具,是近 10 年来新兴起的设计软件类型。目前市面上已经存在非常多的 UI 设计软件,不仅包括国外的,还涌现出一批新兴的国产 UI 设计软件。 可以先将它们分成两个大类,本地和云端。 本地是指设计文件保存在你的电脑本地硬盘中,云端则是指设...
笔记 (19)
只看自己
logo
Evelyn 记录于 4天前
后续还需要学习PS技能
原文: 页面中一些复杂的元素,如广告图、装饰图标等,则会使用 PS 或 AI 等平面软件去完成。
Sophie 记录于 2024-10-28
设计师为了练习手艺而创作的作品
原文: 飞机稿案例
paidx6061 记录于 2024-06-13
设计师在具备完整的界面设计能力之后,就可以结合 UI 软件相关的样式、组件功能,提升构建全局设计系统的能力。
Nitaaa 记录于 2024-01-24
图标设计要专门练习 可以制定计划每天练习几个
原文: 尽量在完成前面的任务以后再预留出一段时间进行专项的训练,才能有效的提升图标设计的认识和能力。
Nitaaa 记录于 2024-01-24
骨架先站稳
原文: UI 设计的流程是先排版后上色,即使只用黑白灰也足以输出优秀的界面。
Nitaaa 记录于 2024-01-24
临摹界面提升掌握软件的能力
原文: 对于专业的 UI 设计来讲,页面设计能力和项目设计能力不是同一件事,设计师需要先通过提升页面设计能力,才能驾驭整个项目的设计。网上大量的飞机稿案例,就是不同设计师为了提升界面设计能力所做出的练习。
七月屿夏 记录于 2024-01-19
各类页面的集合
原文: 综合型首页、分类页、表单页、详情页、列表页、设置页等。
七月屿夏 记录于 2024-01-19
其他软件使用
原文: 复杂的元素,如广告图、装饰图标等,则会使用 PS 或 AI 等平面软件去完成。
七月屿夏 记录于 2024-01-19
七大技能
原文: UI软件的使用 系统设计规范认识 主流的控件、组件掌握 界面的布局和排版 配色的逻辑和应用 图标的独立设计能力 项目设计规范定义
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞