作者：数字艺术教育研究室
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
UI设计参考手册试读：
前言
UI的本意是User Interface，也就是用户与界面的关系。它包括交互设计、用户研究与界面设计三个部分。随着软件应用的广泛普及，人们对它要求也逐步提高，用户不止看中其功能实用性，更是需要UI来提升用户体验性，在享受操作软件带来的方便之余也追求其美观性带来的愉悦感。因此UI界面设计在产品竞争中所扮演的重要角色是毋庸置疑的，它也是产品的重要卖点，可以提升软件市场竞争力。
界面就相当于一个人的外表与气质，界面的美观与否直接影响着用户的心情。一个优秀的界面设计可以让软件更加生动，个性鲜明，给用户留下很深刻的印象；使用户操作便捷，容易上手，更快、更准确地获取信息，取得用户的信任。
根据UI设计的基本构成和应用分类，本书分为移动设备界面设计和网页界面设计两部分。其中移动设备界面设计分为主题、布局、色彩、应用、图标共5章；网页界面设计分为主题、应用共2章。每一章都会介绍本章主题在UI设计中的相关运用，帮助读者掌握UI设计在各方面运用的基础知识。本书主要通过大量的UI设计案例来展示每章的内容，每个设计案例都在布局、颜色和整体评价三个方面进行详细的分析和讲解，能够使读者提高对UI设计的审美能力和理解能力。
希望本书的读者能够将所学的UI设计技巧应用到实际应用中去，创作出更优秀的UI设计作品。上篇移动设备界面设计第01章主题（移动设备）1.1 爱情
爱情使人联想到幸福、甜蜜与浪漫，在设计上大多以浪漫、甜美的风格为主，通常以桃红、粉色、大红为主要色调，运用心形、玫瑰等元素，将爱情主题的元素表现出来。浪漫
这款以爱情为主题的手机UI设计，采用一个心形为主体元素，象征着对爱情一心一意与热情。
❶图标的主体颜色统一采用大红色，并添加浅灰色的弧角外轮廓，调和了强烈的色彩对比，使整个界面看起来更整齐，同时也透露着细腻的时尚品位。
❷红心在深色背景的衬托下十分抢眼，与整齐排列的图标形成强大的对比。主界面大面积留白，简洁并突出主题。
❸背景色彩为深灰色，搭配浅灰色心形作点缀，更加突出红色图标，视觉对比强烈。甜蜜
这款手机UI设计采用最能象征爱情的玫瑰花为主体元素，搭配典雅的手写体等细节设计，俘获了女人的芳心。
❶图标的设计采用丝带、香水、钻石等情人间的礼物为元素，增加了浪漫色彩，女性味儿十足。
❷主题元素位于界面中心位置，突出主题。
❸界面主色调为柔和的粉红色，衬托出唯美温馨的浪漫爱情。永恒
这款手机UI设计采用几何图形为设计元素，构成璀璨的钻石，表现出爱情像钻石一样可以永恒的主题。
❶图标背景为五边形设计，加入阴影，使之立体化，突出了图标的功能。
❷整个界面采用简单的几何块面为主题元素，点缀小圆点，使整个设计显得更加灵动。
❸背景色彩为浅粉色，搭配亮丽的玫红色，优雅华美，体现出爱情的热烈。甜美
这款手机UI设计采用爱情鸟的元素，寓意爱情甜甜蜜蜜，整体风格可爱、乖巧，非常吸引女性用户的目光。
❶图标设计运用红心、玫瑰花、化妆品等女性喜爱的元素，进行了可爱风格的设计，给人一种甜蜜的感觉。
❷采用了九宫格的布局，排列整齐，展示形式简单明了，方便用户操作。
❸整体颜色运用低彩度的粉色，搭配着低彩度的蓝色，给人一种柔和、甜美的视觉体验。1.2 酷炫
酷炫通常给人前卫的感觉，个性化极强。在界面设计上，酷炫运用流光等科幻感十足的元素，搭配对比强烈的色彩，具有较强的视觉冲击力，大多被走在时尚前沿的年轻人所喜欢。诡异
这款手机UI设计运用神秘的符号元素，结合黑色的背景营造出一种诡异气氛。
❶图标设计上进行了荧光效果的设计，十分闪耀前卫。
❷布局紧凑有序，清晰直观。
❸背景颜色运用了黑色，突显出亮丽的图标。浩瀚
这款手机UI设计采用宇宙中天体的形象，背景为浩瀚无垠的银河系。蓝紫的主色调点缀着亮闪闪的繁星，展现出一种神秘感。
❶图标采用圆形，运用色彩渐变营造出光影效果，表现出简洁清晰的图标形象。
❷系统界面将图标与信息进行竖排的格式布局，系统图标采用单线轮廓式与文字颜色统一，秩序感强。
❸整个界面以蓝紫色为主色调，点缀同色系的粉色和紫色，营造出神秘的氛围。飘逸
这款手机UI设计十分明亮，风格飘逸，具有流动的感觉。
❶以简单的图形和颜色的渐变表现简洁的图标，运用与背景颜色统一的绿色、蓝色和橙色，图标与背景彼此呼应。
❷横版布局使信息界面清晰直观，方便用户使用。
❸颜色运用纯度较高的三种颜色，色彩对比突出有一定的视觉冲击力。力量
这款手机UI设计运用超级英雄蝙蝠侠的形象，结合对比强烈的色彩，整个界面充满了力量感。
❶图标采用了扁平化的设计，运用与背景相呼应的颜色，精练简洁。
❷界面居中，图标采用横版布局，设置界面采用九宫格布局，构图稳定。
❸背景颜色运用了黑色，主界面中运用了冷暖色的强烈对比。1.3 商务
商务主题风格的界面设计，风格大多稳重大气、简洁明了，通常以扁平化的设计风格为主，运用一些棱角分明的元素与深色背景进行搭配，深受商务人士的喜爱。严谨
这款手机界面UI设计采用斑驳的铁锈纹理元素，颜色暗沉，给人一种严肃的感觉，虽然看似低调，却不失商务风的严谨态度。
❶图标进行立体化、质感化的设计处理，并没有统一风格，但是色彩鲜艳，与暗沉的背景对比明显，用户能一目了然地了解图标的内容。
❷界面简洁，布局以横版为主，侧边框布局为竖版，布局整齐而有秩序，显现出严谨的商务风格。
❸整体色调暗沉，图标颜色艳丽，加强了图标与背景的对比性，突出图标的实用性。科技
这款手机UI设计采用几何图形为元素，光感效果呈现出精致高雅、质感强烈、科技感十足的特点。
❶图标的设计上，形体造型简练明确，采用了统一风格的处理，但又不尽相同，保留了图标本身的特点。
❷界面布局简洁并突出重点，整体布局采用竖版，整齐的排序显现出干练有秩序的感觉。
❸整体色彩运用黑色和绿色，黑色沉稳，绿色知性，这正是商务风格所具备的特性。光晕
这款手机UI设计整体具有一种透明质感，结合了光晕、暗纹素材，比较符合商务型用户的使用风格。
❶图标进行了水晶般的透明质感的设计，细腻美观，与色彩鲜艳的背景相得益彰。
❷整体采用了横版布局，信息界面清晰直观，天气等实用性较强的版块突出显示，方便用户使用。
❸主界面用色暗沉，严肃稳重，应用界面颜色鲜明大胆，搭配和谐。雅致
这款手机UI设计运用暗沉的色调界面营造出严谨端正的氛围，植物元素的加入增加了雅致感。
❶图标采用了简约的设计理念，十分精致，无边框的设计能够让用户一目了然地理解图标的内容，方便用户操作使用。
❷整体为竖版布局，整体布局均匀，主界面采用大面积留白，突出背景。
❸主色调为暗沉的深蓝色，代表沉思和创造，给人以严肃和受信任的感觉。1.4 自然
自然主题风格的界面设计运用一些自然界中的动植物形象，将多姿多彩的大自然呈现在用户面前。颜色一般运用自然中常见的绿色与高彩度的红色、黄色、粉色、蓝色等搭配，色彩鲜艳，让人赏心悦目、心旷神怡。翠鸟
这款手机UI设计以翠鸟为主要元素，结合了朦胧的背景，呈现出山野空旷的视觉感受。
❶图标的设计使用了倒角边框，图标圆润可爱，使用的颜色与背景中的小鸟相互辉映。
❷界面的设计采用了竖版的布局，符合用户的使用习惯。
❸主题的整个界面以绿色为主，背景上的小鸟色彩丰富亮丽，与朦胧的背景相映成趣，眼前一亮。小草
这款手机UI设计以正在萌芽生长的小草为主要元素，具有空间层次感，给人一种郁郁葱葱、欣欣向荣的视觉感受，象征着生命。
❶在图标的设计上，边框采用了叶子形状，十分新颖。颜色同样采用绿色，与整款设计风格统一。
❷采用了横版的布局，简洁而有秩序，图标排列错落有致、布局均匀。
❸色彩采用了绿色，清新怡人，搭配黄绿色，让人感觉放松，零压力。鲜花
这款手机UI设计采用鲜花的形象作为基本元素，营造出浪漫清新的氛围。
❶图标采用圆形立体边框的设计，简单的图形使图标更精练。
❷布局多采用横版构图，图标摆列秩序感强，方便用户操作。
❸色彩主要运用粉色，和绿色、蓝色搭配，给人一种清爽别致的视觉感受。蝴蝶
这款手机UI设计以蝴蝶和花为元素，结合了绿色的图标，将大自然中的美表现得淋漓尽致。
❶图标采用了圆角设计，圆润可爱又不失整齐，运用绿色的渐变与对比，简洁地勾勒出特征一致的图标，与背景风格统一。
❷主界面留有大面积空白，重点表现背景中的蝴蝶，图标的布局随背景的变化而变化，显得错落有致。
❸主体颜色运用了大自然中常见的绿色，画面清新又富有诗意，背景中粉色的花为整体添了一抹亮丽的颜色。1.5 动漫
动漫主题风格的界面设计主要是为了迎合比较年轻的受众人群的喜好。动漫的形象给人的感受也是多变的，诙谐幽默、可爱呆萌、青春向上，手法可以原创独立，也可以手绘、电脑制作等。动漫主题风格的界面设计既吸引了年轻人的注意力，也能提高对产品的购买力。可爱
这款手机UI界面设计采用猫咪的卡通形象，可爱呆萌，整体界面风格统一。
❶功能性的图标设计，形象准确、圆润，拉近了用户与界面的距离。
❷界面布局结构均衡，不同功能、层次的界面，主次分明。
❸色彩搭配统一和谐、鲜明艳丽，毫不夸张地迎合了学生、年轻女性的喜好，受众人群显而易见。神秘
这款手机UI界面设计采用西方万圣节的卡通形象，结合具有神秘色彩的元素呈现出风格和创意俱佳的视觉体验。相比真实的场景来说，故事的神秘色彩更加浓郁。
❶图标的设计与以往不同，具有深层次的指代寓意，能勾起受众者的好奇心。
❷设计师在界面布局上留有面积较大的空白，这也给用户提供了想象的空间。
❸界面的背景色彩搭配暗沉，符合主题思想的要求。简练
这款手机UI界面设计采用超萌英雄的动漫形象制作，呈现出一种简约干练的风格，使原本富有英雄主义的人物形象多了卡通的亲切自然。
❶解锁界面干净又富有寓意，图标设计也很幽默风趣，既亲切自然，又不失简洁大气。
❷竖排的界面布局，结构稳定，信息界面清晰直观。
❸色彩搭配沉稳，符合界面的主题风格。统一
这款手机UI界面设计同样采用了呆萌可爱的猫咪的卡通形象，形成了手机主界面的整体的卡通风格。
❶图标的设计沿用卡通造型的设计原理，使整款产品统一和谐，格外轻松活泼。
❷整体布局清晰，解锁界面的版式编排符合用户对于猫咪的行为习惯的认知。
❸天气界面颜色应用鲜明大胆，对比突出，但不失统一完整性。1.6 古典
古典主题风格的界面设计，从整体到图标，精雕细琢，给人一丝不苟的印象，具有怀古的浪漫情怀，表现出华贵典雅、超凡脱俗的视觉感受，使人很强烈地感受到传统的历史痕迹与浑厚的文化底蕴。紫色、金色、黄色、暗红是古典风格中常见的主色调，少量白色糅合，使色彩看起来明亮、大方。神秘
这款手机UI设计采用西方古典神话中狮子的形象，整体的色调稍显梦幻，金属质感的装饰更添一种神秘的气息。
❶图标采用了图腾化的设计，在细节处理上增添了金属质感，使图标更加立体化。
❷横版布局使这款古典风格的手机UI显得中规中矩，整体布局均匀，结构稳定。
❸在背景上运用了蓝色、绿色和紫色的渐变，朦胧而梦幻，金色的装饰与背景的暗沉对比强烈，加强了界面的视觉冲击力。复古
这款手机UI设计运用西方的古典图案和装饰素材作为基本元素，结合具有时代感的棕黄色，呈现出一种怀旧、复古的视觉感受。
❶图标将扁平化图标和拟物化图标相结合，添加黑色的欧式花纹边框，显得十分繁复，极具浪漫情怀。
❷界面布局对称居中，布局严谨，符合古典审美。
❸背景色彩运用典雅的米色和浅咖色，给人怀旧的复古感，具有浓厚的艺术气息。清新
这款手机UI设计运用细腻的手绘插画为元素，结合大面积留白，给用户带来一种清新的视觉体验。
❶图标的设计有些突破，并不拘泥于传统的样式，采用了信封、门牌、拨号电话等素材和圆角菱形的图标背景，使整款产品风格统一。
❷横版的界面设计布局均匀，界面信息一目了然，用户操作方便。
❸背景运用了浅米色，与鲜艳的手绘插画形成强烈反差。整款设计浓郁而富有情调，很有小资风格。田园
这款手机UI设计是田园风格，运用了田园风格中常见的蕾丝、碎花素材，用色粉嫩，受女性用户的青睐。
试读结束[说明：试读内容隐藏了图片]