UI设计与制作_计算机科学

1

前　言

“用户体验”是一个非常热门的话题，在互联网时代，所有的人都在谈“用户体验”，从项目设计师到产品经理，用户体验成为市场竞争中的关键要素。当前，我国移动互联网产业规

阅读

2

前　言

介绍了图标设计规范和PS工作环境，所列举的两个实例很有代表性，读者从中能掌握图标设计方法。第三章手机UI主题设计概述，介绍了手机主题风格分类，并且列举了锁屏界面

阅读

3

第一章　UI设计基础

CHAPTER 1 学习目标本章学习的目标是熟悉产品UI的设计流程和了解用户体验中的职业定位，掌握UI设计主要包括的内容。学习重点(https://www.

阅读

5

第一节　什么是UI设计

UI即Use Interface，译为“用户界面设计”。界面设计的目的是为用户而设计，所以UI设计要和用户研究紧密结合，是一个不断为最终用户的需求而改进UI设计

阅读

6

一　用户研究

用户需求集中反映了用户对产品的期望。很明显，用户需求应该包含功能需求和使用需求两方面，功能需求是用户要求系统所应具备的性能、功能，而使用需求是用户要求系统所应具

阅读

7

二　信息结构设计

功能梳理是用户界面设计工作的第一步，这项工作特别复杂和烦琐。如果分类不合理，用户遵循已有的认知，就会很难找到他想要的东西。信息结构的分类是用户界面设计的基础，

阅读

8

三　交互设计

分类之后，另外一个重要的事情就是建立通道，使用户能够简单方便地找到他想要的东西。这个通道就是交互设计。交互设计为用户解决两个问题：1找到目标：2完成任务。通道

阅读

9

四　视觉设计

几乎所有的产品都会涉及视觉设计。对于什么构成视觉上的愉悦和满足，每个人都有不同的审美品位和偏好，所以每个人对美感都有不同的见解。我们可以在民间艺术、广告、儿童产

阅读

10

第二节　UI的设计流程

完成一个产品，UI设计流程根据开发的准备期、开发的前期、开发的中后期和上市期，内容上包含的几个方面分别是：开发准备期、开发前期、开发中期、开发后期和上市前期以及

阅读

11

一　用户需求分析阶段

此阶段UI设计师应该了解产品的定位，进行用户需求分析，分析用户群特征、最终用户群和产品方向，完成用户研究报告并且提出可用性设计建议。(https://www.d

阅读

12

二　工业设计/界面设计

用户不同，对产品界面的设计要求也会不同，UI设计师根据原型设计阶段的界面原型，对界面原型进行视觉效果的再设计。(https://www.daowen.com)

阅读

13

三　使用性测试以及设计改进/发布

UI设计师接下来更多的是配合开发人员、测试人员进行设计改进；对于不同产品的要求，配合开发人员对产品进行使用性测试以及设计改进和发布。(https://www.d

阅读

14

四　品牌维护以及优化

UI设计师负责原型的可用性测试，发现可用性问题并提出修改意见。通过可用性的循环研究、用户体验回馈、测试回馈，UI设计师把可行性建议进行完善。产品出来后，UI设计

阅读

15

第三节　用户体验中的职业选择

(https://www.daowen.com)

阅读

16

一　产品/项目经理

产品/项目经理（Product Designer），负责写产品计划书，能带领整个项目组实现指定项目目标，对产品策划、美术、程序、运营有深刻的理解及相关工作经验，

阅读

17

二　用户体验研究员

用户体验研究员UX Designer（User Experiences Designer）负责调查分析，主要关注产品给用户的感受。一个设计中的需求不只有一个正确

阅读

18

三　互动设计师

互动设计师（Interaction Designer/Motion Designer），做出具体互动的流程。还记得当你用iPhone的Mail应用下拉刷新邮件时

阅读

19

四　视觉设计师

企业对于视觉设计师（UI Designer/User Interface Designer）的职位需求：与UX Designer不同，UI Designer普遍

阅读

20

五　前台、后台工程师

前台、后台工程师（Front-end Developer/UI Developer）的工作是实现产品的前端界面。通常，视觉设计师提供一个静态的界面模型，UI D

阅读

21

六　用户体验研究员

用户体验研究员（User Researcher），做用户测试，确保质量。一个UX Researcher的任务是回答两个问题：“谁是我们的用户？”以及“我们的用户

阅读

22

第二章　图标设计

CHAPTER 2 学习目标本章学习的目标是熟悉图标设计规范和理解Photoshop制作UI的重点工具的使用方法，掌握形状图层、智能对象或者智能滤镜、布尔运算

阅读

23

第一节　图标设计规范

移动界面的设计规范是指导界面设计过程中的设计标准。要遵循统一的设计标准，使得整个界面在视觉上统一，从而提高用户对界面的产品认知和操作的便捷性。下面我们以APP

阅读

24

第二节　工作环境

Photoshop是Adobe公司开发的一个跨平台的平面图像处理软件，是UI设计人员的首选软件。接下来我们就熟悉一下Photoshop的工作环境。Photosh

阅读

25

一　Photoshop重点工具介绍

1.路径选择工具路径是Photoshop中的重要工具，主要用于光滑图像选择区域与辅助抠图，绘制光滑和精细的图形，定义画笔等工具的绘制轨迹。在使用上，黑箭头可以

阅读

26

二　制作图标之前首选项的设置

因为制作图标都是以像素为单位，所以在制作图标之前我们需要对首选项进行设置，把单位都调整为“像素”。选择Photoshop中的首选项的“单位与标尺”。 UI设计首

阅读

27

第三节　形状图层

在UI的图标设计中，需要用基础形状制作图标（也称ICCN）或者用几何形状切出小图标。这样制作的目的首先是体现设计的精细化，其次是为了产品的整体设计效果，也是为了

阅读

28

第四节　智能对象与智能滤镜

在UI制作中，通常会使用智能对象或者智能滤镜。智能对象把每一个图层整体编辑到了一起，当你要再使用的时候，点开智能对象再进行编辑就可以了。另外智能对象可以放大（不

阅读

29

第五节　布尔运算

用布尔运算绘制小图标，再将绘制对象合并在同一个图层里，由路径拼切出来，快捷键“Ctrl+E”（在苹果电脑中使用“command+E”）。在顶部的选项栏里，可以选

阅读

30

案例1　图标设计制作——短信图标

（请扫描版权页上的二维码，下载教学视频）图17　短信图标 STEP1 选择菜单栏里的“文件/新建”命令，打开新建对话框，新建一个尺寸为200×200像素的文

阅读

《UI设计与制作》简介

前　言

前　言

目录