版式设计（第二版）课件：UI版式设计

UI

版式设计UI

是user

interface

(用户界面)的简称，本节我们主要介绍应用软件的UI版

式设计。此处我们讲的UI版式设计是指对

应用软件的操作逻辑、界面的版式设计。

好

的UI版式设计不仅让应用软件变得有个

性、有品位，还让应用软件操作起来简单、

方便，可充分提升软件用户的体验，如图

5-7-1所示。

UI

版式设计一

、UI版式设计的概念图5~7-

1

应用软件UI

版式设计二、UI

版式设计的原则1.简易性UI版式设计应方便用户使用和了解产品，使用户能快速上手操作，减少发生用户选择错误情况的可能性。2.一致性用户界面的结构必须清晰且一致，版式设计风格必须与产品内容相统一。

UI版式设计3.色彩搭配舒适用户界面的色彩搭配要考虑到应用软件的使用场景、使用对象以及想要营造的氛围等。

4.人性化高效率和用户满意是UI版式设计的人性化体现。

UI版式设计三、UI常见版式1.九宫格版式九宫格版式主要运用在以分类为主的一级页面中，能起到划分页面功能的作用。采用九宫

格版式的界面信息布局更为规范，用户使用起来非常方便，应用和功能会显得明确、突出，

如图5-7-2所示。

UI

版式设计

UI版式设计SmartGift图5

-

7

-

2

采用九宫格版式的用户界面ProprshopfxchangecodeBrowse

Movies

to

MakeALLCATEGORIESX

UI

版式设计2.放射状版式放射状版式有凸显中间内容或功能点的作用。在强调核心功能点时，可以以主要功能点为

中心，将其他的功能点或内容呈放射状编排，从而引导用户的视线，使其将目光聚集在想要

突出的功能点上，如图5-7-3所示。

UI版式设计图5-

7-

3

采用放射状版面的用户界面Breakfast

AmazingMealtimeLunchnin

UI

版式设计3.三角形版式三角形版式主要运用在文字与图标的编排中，能让界面保持平衡、稳定。从上至下的三角

形构图，能把信息罗列得更为规整。在用户界面中，采用三角形版式设计的版面大多是图在

上、字在下，这样用户阅读起来更为舒服，且重点突出，如图5-7-4所示。个人所得税美丽修行一键台录密码

请输入密码请按住滑块，拖动到最右边扫脸登录|找回密码微信登录登录注册

UI版式设计图

5

-

7

-

4

采用三角形版式的用户界面换个登录方式<返回更多

UI

版式设计4.列表式版式列表式版式是指在用户界面中以列表形式展示各项信息的版面形式。列表式版式常用在通

信类、电商类、新闻自媒体类、应用下载类等软件用户界面中。在采用列表式版式的用户界

面中，软件用户可通过滑动列表来浏览各项信息，用户界面信息层次清晰，浏览方便，如图

5-7-5所示。用户注册手机号码停用、注销或无法接收短信的。如何修…如何注册成为互联网平台用户?个人用户在注册时，如遇本人身份证成手机号码被人占用…用户语到交管张户被锁定或者停用时该如何处理?备案非本人机动车流程图解业务指南事故快处流程图解满分学习考试流程图解驾驶人审验流程图解这空铁联运订单计次·定期票订单约车订单1阅出站引导服务订单

UI版式设计汽车票订单5旅游订单收入纳税明细查询已申报收入的查询及异议申诉申请开具纳税记最综合所得年度汇算居民个人综含所得年度汇算申报(仪取得境内综合

所得适用》餐饮

·特产订单保险订单酒店订单铁水联运订单专项附加扣除填报子女教育、继续教育等专项附加扣除的填报图5-

7-

5

采用列表式版式的用户界面火车票订单

温警提示待支付

已支付

候补订单本人车票办事网点

咨询电话△◎申颁免检合格标志流程解铁路会员

我

的铁路商城订单四收起人5.弹窗式版式弹窗式版