上篇 移动设备界面设计
第01章 主题(移动设备)
1.1 爱情
爱情使人联想到幸福、甜蜜与浪漫,在设计上大多以浪漫、甜美的风格为主,通常以桃红、粉色、大红为主要色调,运用心形、玫瑰等元素,将爱情主题的元素表现出来。
浪漫
这款以爱情为主题的手机UI设计,采用一个心形为主体元素,象征着对爱情一心一意与热情。
C44 M100 Y97 K12 R161 G31 B39
C66 M58 Y55 K4 R106 G106 B106
C82 M77 Y76 K56 R37 G37 B37
C87 M85 Y83 K74 R16 G10 B12
❶图标的主体颜色统一采用大红色,并添加浅灰色的弧角外轮廓,调和了强烈的色彩对比,使整个界面看起来更整齐,同时也透露着细腻的时尚品位。
❷红心在深色背景的衬托下十分抢眼,与整齐排列的图标形成强大的对比。主界面大面积留白,简洁并突出主题。
❸背景色彩为深灰色,搭配浅灰色心形作点缀,更加突出红色图标,视觉对比强烈。
甜蜜
这款手机UI设计采用最能象征爱情的玫瑰花为主体元素,搭配典雅的手写体等细节设计,俘获了女人的芳心。
C0 M0 Y0 K0 R255 G255 B255
C22 M66 Y46 K0 R209 G115 B115
C62 M71 Y70 K23 R105 G76 B68
C9 M25 Y12 K0 R230 G205 B210
C84 M55 Y86 K23 R44 G89 B60
❶图标的设计采用丝带、香水、钻石等情人间的礼物为元素,增加了浪漫色彩,女性味儿十足。
❷主题元素位于界面中心位置,突出主题。
❸界面主色调为柔和的粉红色,衬托出唯美温馨的浪漫爱情。
永恒
这款手机UI设计采用几何图形为设计元素,构成璀璨的钻石,表现出爱情像钻石一样可以永恒的主题。
C40 M100 Y43 K0 R166 G23 B92
C9 M33 Y0 K0 R230 G189 B216
C0 M0 Y0 K0 R255 G255 B255
C12 M85 Y0 K0 R213 G64 B145
C1 M21 Y0 K0 R248 G218 B232
❶图标背景为五边形设计,加入阴影,使之立体化,突出了图标的功能。
❷整个界面采用简单的几何块面为主题元素,点缀小圆点,使整个设计显得更加灵动。
❸背景色彩为浅粉色,搭配亮丽的玫红色,优雅华美,体现出爱情的热烈。
甜美
这款手机UI设计采用爱情鸟的元素,寓意爱情甜甜蜜蜜,整体风格可爱、乖巧,非常吸引女性用户的目光。
C18 M0 Y39 K0 R220 G234 B177
C42 M0 Y22 K0 R157 G212 B208
C1 M63 Y19 K0 R236 G126 B152
C36 M16 Y45 K0 R177 G193 B153
C0 M27 Y11 K0 R248 G205 B208
❶图标设计运用红心、玫瑰花、化妆品等女性喜爱的元素,进行了可爱风格的设计,给人一种甜蜜的感觉。
❷采用了九宫格的布局,排列整齐,展示形式简单明了,方便用户操作。
❸整体颜色运用低彩度的粉色,搭配着低彩度的蓝色,给人一种柔和、甜美的视觉体验。
1.2 酷炫
酷炫通常给人前卫的感觉,个性化极强。在界面设计上,酷炫运用流光等科幻感十足的元素,搭配对比强烈的色彩,具有较强的视觉冲击力,大多被走在时尚前沿的年轻人所喜欢。
诡异
这款手机UI设计运用神秘的符号元素,结合黑色的背景营造出一种诡异气氛。
C57 M0 Y100 K0 R121 G188 B40
C89 M49 Y100 K39 R0 G79 B38
C0 M0 Y0 K100 R100 G100 B100
❶图标设计上进行了荧光效果的设计,十分闪耀前卫。
❷布局紧凑有序,清晰直观。
❸背景颜色运用了黑色,突显出亮丽的图标。
浩瀚
这款手机UI设计采用宇宙中天体的形象,背景为浩瀚无垠的银河系。蓝紫的主色调点缀着亮闪闪的繁星,展现出一种神秘感。
C22 M35 Y4 K0 R204 G175 B206
C92 M86 Y20 K0 R44 G59 B130
C0 M0 Y0 K100 R250 G250 B250
C48 M70 Y5 K0 R150 G97 B159
C6 M92 Y63 K31 R97 G38 B60
❶图标采用圆形,运用色彩渐变营造出光影效果,表现出简洁清晰的图标形象。
❷系统界面将图标与信息进行竖排的格式布局,系统图标采用单线轮廓式与文字颜色统一,秩序感强。
❸整个界面以蓝紫色为主色调,点缀同色系的粉色和紫色,营造出神秘的氛围。
飘逸
这款手机UI设计十分明亮,风格飘逸,具有流动的感觉。
C0 M0 Y0 K0 R250 G250 B250
C59 M30 Y0 K0 R111 G158 B211
C42 M12 Y77 K0 R165 G190 B88
C16 M2 Y0 K0 R221 G238 B251
C6 M15 Y57 K0 R243 G217 B127
❶以简单的图形和颜色的渐变表现简洁的图标,运用与背景颜色统一的绿色、蓝色和橙色,图标与背景彼此呼应。
❷横版布局使信息界面清晰直观,方便用户使用。
❸颜色运用纯度较高的三种颜色,色彩对比突出有一定的视觉冲击力。
力量
这款手机UI设计运用超级英雄蝙蝠侠的形象,结合对比强烈的色彩,整个界面充满了力量感。
C12 M62 Y41 K0 R219 G124 B122
C67 M11 Y55 K0 R82 G171 B136
C0 M0 Y0 K100 R0 G0 B0
C0 M89 Y73 K0 R242 G59 B57
C76 M70 Y70 K36 R63 G63 B60
❶图标采用了扁平化的设计,运用与背景相呼应的颜色,精练简洁。
❷界面居中,图标采用横版布局,设置界面采用九宫格布局,构图稳定。
❸背景颜色运用了黑色,主界面中运用了冷暖色的强烈对比。
1.3 商务
商务主题风格的界面设计,风格大多稳重大气、简洁明了,通常以扁平化的设计风格为主,运用一些棱角分明的元素与深色背景进行搭配,深受商务人士的喜爱。
严谨
这款手机界面UI设计采用斑驳的铁锈纹理元素,颜色暗沉,给人一种严肃的感觉,虽然看似低调,却不失商务风的严谨态度。
C47 M56 Y54 K0 R153 G120 B109
C67 M84 Y81 K56 R63 G31 B29
C0 M0 Y0 K100 R0 G0 B0
C60 M77 Y75 K31 R99 G61 B54
C79 M71 Y68 K35 R57 G67 B62
❶图标进行立体化、质感化的设计处理,并没有统一风格,但是色彩鲜艳,与暗沉的背景对比明显,用户能一目了然地了解图标的内容。
❷界面简洁,布局以横版为主,侧边框布局为竖版,布局整齐而有秩序,显现出严谨的商务风格。
❸整体色调暗沉,图标颜色艳丽,加强了图标与背景的对比性,突出图标的实用性。
科技
这款手机UI设计采用几何图形为元素,光感效果呈现出精致高雅、质感强烈、科技感十足的特点。
C59 M15 Y31 K0 R109 G176 B177
C92 M63 Y75 K34 R1 G69 B62
C0 M0 Y0 K100 R0 G0 B0
C80 M25 Y53 K0 R6 G145 B132
C3 M76 Y97 K0 R231 G94 B14
❶图标的设计上,形体造型简练明确,采用了统一风格的处理,但又不尽相同,保留了图标本身的特点。
❷界面布局简洁并突出重点,整体布局采用竖版,整齐的排序显现出干练有秩序的感觉。
❸整体色彩运用黑色和绿色,黑色沉稳,绿色知性,这正是商务风格所具备的特性。
光晕
这款手机UI设计整体具有一种透明质感,结合了光晕、暗纹素材,比较符合商务型用户的使用风格。
C18 M72 Y42 K0 R207 G100 B112
C74 M23 Y89 K0 R68 G149 B73
C81 M73 Y70 K43 R47 G53 B54
C47 M8 Y94 K0 R152 G189 B48
C97 M93 Y14 K0 R32 G47 B130
❶图标进行了水晶般的透明质感的设计,细腻美观,与色彩鲜艳的背景相得益彰。
❷整体采用了横版布局,信息界面清晰直观,天气等实用性较强的版块突出显示,方便用户使用。
❸主界面用色暗沉,严肃稳重,应用界面颜色鲜明大胆,搭配和谐。
雅致
这款手机UI设计运用暗沉的色调界面营造出严谨端正的氛围,植物元素的加入增加了雅致感。
C68 M0 Y52 K0 R66 G183 B147
C90 M92 Y28 K0 R56 G51 B118
C0 M0 Y0 K100 R0 G0 B0
C100 M97 Y56 K18 R23 G40 B77
C99 M84 Y59 K33 R0 G47 B69
❶图标采用了简约的设计理念,十分精致,无边框的设计能够让用户一目了然地理解图标的内容,方便用户操作使用。
❷整体为竖版布局,整体布局均匀,主界面采用大面积留白,突出背景。
❸主色调为暗沉的深蓝色,代表沉思和创造,给人以严肃和受信任的感觉。
1.4 自然
自然主题风格的界面设计运用一些自然界中的动植物形象,将多姿多彩的大自然呈现在用户面前。颜色一般运用自然中常见的绿色与高彩度的红色、黄色、粉色、蓝色等搭配,色彩鲜艳,让人赏心悦目、心旷神怡。
翠鸟
这款手机UI设计以翠鸟为主要元素,结合了朦胧的背景,呈现出山野空旷的视觉感受。
C3 M46 Y92 K0 R240 G159 B20
C68 M22 Y100 K0 R92 G154 B52
C62 M87 Y20 K0 R123 G59 B127
C14 M91 Y91 K0 R211 G55 B37
C69 M44 Y0 K0 R88 G128 B193
❶图标的设计使用了倒角边框,图标圆润可爱,使用的颜色与背景中的小鸟相互辉映。
❷界面的设计采用了竖版的布局,符合用户的使用习惯。
❸主题的整个界面以绿色为主,背景上的小鸟色彩丰富亮丽,与朦胧的背景相映成趣,眼前一亮。
小草
这款手机UI设计以正在萌芽生长的小草为主要元素,具有空间层次感,给人一种郁郁葱葱、欣欣向荣的视觉感受,象征着生命。
C41 M0 Y77 K0 R167 G206 B90
C66 M8 Y40 K0 R79 G177 B165
C89 M65 Y100 K52 R15 G52 B26
C59 M9 Y90 K0 R116 G177 B67
C84 M44 Y92 K5 R37 G115 B66
❶在图标的设计上,边框采用了叶子形状,十分新颖。颜色同样采用绿色,与整款设计风格统一。
❷采用了横版的布局,简洁而有秩序,图标排列错落有致、布局均匀。
❸色彩采用了绿色,清新怡人,搭配黄绿色,让人感觉放松,零压力。
鲜花
这款手机UI设计采用鲜花的形象作为基本元素,营造出浪漫清新的氛围。
C13 M43 Y0 K0 R220 G165 B202
C38 M100 Y30 K0 R170 G16 B105
C62 M50 Y89 K6 R115 G116 B60
C31 M70 Y0 K0 R183 G99 B16
C72 M40 Y17 K0 R76 G132 B176
❶图标采用圆形立体边框的设计,简单的图形使图标更精练。
❷布局多采用横版构图,图标摆列秩序感强,方便用户操作。
❸色彩主要运用粉色,和绿色、蓝色搭配,给人一种清爽别致的视觉感受。
蝴蝶
这款手机UI设计以蝴蝶和花为元素,结合了绿色的图标,将大自然中的美表现得淋漓尽致。
C19 M49 Y62 K0 R210 G147 B98
C26 M84 Y0 K0 R190 G66 B146
C90 M69 Y100 K60 R9 G41 B19
C59 M22 Y18 K0 R110 G167 B193
C88 M48 Y100 K14 R12 G101 B53
❶图标采用了圆角设计,圆润可爱又不失整齐,运用绿色的渐变与对比,简洁地勾勒出特征一致的图标,与背景风格统一。
❷主界面留有大面积空白,重点表现背景中的蝴蝶,图标的布局随背景的变化而变化,显得错落有致。
❸主体颜色运用了大自然中常见的绿色,画面清新又富有诗意,背景中粉色的花为整体添了一抹亮丽的颜色。
1.5 动漫
动漫主题风格的界面设计主要是为了迎合比较年轻的受众人群的喜好。动漫的形象给人的感受也是多变的,诙谐幽默、可爱呆萌、青春向上,手法可以原创独立,也可以手绘、电脑制作等。动漫主题风格的界面设计既吸引了年轻人的注意力,也能提高对产品的购买力。
可爱
这款手机UI界面设计采用猫咪的卡通形象,可爱呆萌,整体界面风格统一。
C49 M0 Y5 K0 R130 G206 B236
C13 M31 Y83 K0 R227 G182 B57
C51 M99 Y100 K32 R118 G22 B8
C11 M0 Y83 K0 R255 G255 B1
C76 M70 Y56 K17 R76 G76 B88
❶功能性的图标设计,形象准确、圆润,拉近了用户与界面的距离。
❷界面布局结构均衡,不同功能、层次的界面,主次分明。
❸色彩搭配统一和谐、鲜明艳丽,毫不夸张地迎合了学生、年轻女性的喜好,受众人群显而易见。
神秘
这款手机UI界面设计采用西方万圣节的卡通形象,结合具有神秘色彩的元素呈现出风格和创意俱佳的视觉体验。相比真实的场景来说,故事的神秘色彩更加浓郁。
C2 M40 Y85 K0 R253 G177 B39
C76 M83 Y46 K9 R85 G63 B98
C0 M0 Y0 K100 R0 G0 B0
C61 M71 Y80 K28 R102 G71 B53
C84 M94 Y53 K28 R60 G38 B74
❶图标的设计与以往不同,具有深层次的指代寓意,能勾起受众者的好奇心。
❷设计师在界面布局上留有面积较大的空白,这也给用户提供了想象的空间。
❸界面的背景色彩搭配暗沉,符合主题思想的要求。
简练
这款手机UI界面设计采用超萌英雄的动漫形象制作,呈现出一种简约干练的风格,使原本富有英雄主义的人物形象多了卡通的亲切自然。
C0 M0 Y0 K0 R255 G255 B255
C69 M54 Y38 K0 R98 G113 B135
C89 M82 Y57 K29 R41 G53 B75
C46 M84 Y64 K5 R152 G68 B77
C86 M77 Y51 K16 R51 G66 B91
❶解锁界面干净又富有寓意,图标设计也很幽默风趣,既亲切自然,又不失简洁大气。
❷竖排的界面布局,结构稳定,信息界面清晰直观。
❸色彩搭配沉稳,符合界面的主题风格。
统一
这款手机UI界面设计同样采用了呆萌可爱的猫咪的卡通形象,形成了手机主界面的整体的卡通风格。
C50 M0 Y79 K0 R142 G197 B89
C8 M24 Y89 K0 R237 G197 B39
C56 M90 Y70 K26 R116 G45 B59
C2 M5 Y10 K0 R252 G246 B234
C22 M59 Y89 K0 R201 G125 B45
❶图标的设计沿用卡通造型的设计原理,使整款产品统一和谐,格外轻松活泼。
❷整体布局清晰,解锁界面的版式编排符合用户对于猫咪的行为习惯的认知。
❸天气界面颜色应用鲜明大胆,对比突出,但不失统一完整性。
1.6 古典
古典主题风格的界面设计,从整体到图标,精雕细琢,给人一丝不苟的印象,具有怀古的浪漫情怀,表现出华贵典雅、超凡脱俗的视觉感受,使人很强烈地感受到传统的历史痕迹与浑厚的文化底蕴。紫色、金色、黄色、暗红是古典风格中常见的主色调,少量白色糅合,使色彩看起来明亮、大方。
神秘
这款手机UI设计采用西方古典神话中狮子的形象,整体的色调稍显梦幻,金属质感的装饰更添一种神秘的气息。
C36 M18 Y10 K0 R174 G194 B214
C89 M61 Y54 K10 R24 G89 B102
C0 M0 Y0 K100 R0 G0 B0
C30 M31 Y51 K0 R191 G174 B131
C90 M98 Y51 K25 R24 G89 B102
❶图标采用了图腾化的设计,在细节处理上增添了金属质感,使图标更加立体化。
❷横版布局使这款古典风格的手机UI显得中规中矩,整体布局均匀,结构稳定。
❸在背景上运用了蓝色、绿色和紫色的渐变,朦胧而梦幻,金色的装饰与背景的暗沉对比强烈,加强了界面的视觉冲击力。
复古
这款手机UI设计运用西方的古典图案和装饰素材作为基本元素,结合具有时代感的棕黄色,呈现出一种怀旧、复古的视觉感受。
C43 M41 Y58 K0 R162 G148 B113
C27 M69 Y100 K0 R193 G103 B26
C0 M0 Y0 K100 R0 G0 B0
C26 M42 Y84 K0 R199 G154 B60
C77 M79 Y89 K65 R37 G28 B18
❶图标将扁平化图标和拟物化图标相结合,添加黑色的欧式花纹边框,显得十分繁复,极具浪漫情怀。
❷界面布局对称居中,布局严谨,符合古典审美。
❸背景色彩运用典雅的米色和浅咖色,给人怀旧的复古感,具有浓厚的艺术气息。
清新
这款手机UI设计运用细腻的手绘插画为元素,结合大面积留白,给用户带来一种清新的视觉体验。
C6 M4 Y8 K0 R243 G243 B237
C25 M95 Y69 K0 R193 G42 B65
C72 M65 Y62 K17 R85 G84 B84
C8 M46 Y18 K0 R229 G161 B174
C66 M94 Y65 K41 R81 G84 B51
❶图标的设计有些突破,并不拘泥于传统的样式,采用了信封、门牌、拨号电话等素材和圆角菱形的图标背景,使整款产品风格统一。
❷横版的界面设计布局均匀,界面信息一目了然,用户操作方便。
❸背景运用了浅米色,与鲜艳的手绘插画形成强烈反差。整款设计浓郁而富有情调,很有小资风格。
田园
这款手机UI设计是田园风格,运用了田园风格中常见的蕾丝、碎花素材,用色粉嫩,受女性用户的青睐。
C1 M5 Y8 K0 R253 G246 B237
C13 M56 Y32 K0 R219 G137 B142
C65 M50 Y64 K3 R108 G118 B98
C21 M6 Y11 K0 R210 G226 B226
C36 M14 Y57 K0 R178 G195 B130
❶图标依照简约化的设计思路,增加了投影,使原本扁平的图标稍显立体,与图案复杂的背景呈明显对比。
❷界面清晰直观,采用了横板的布局,操作明确。
❸整体呈现浅粉色调,与背景中相同明度的浅蓝色搭配使整款设计清新、甜美,又充满田园的趣味。
1.7 科幻
科幻主题风格的界面设计,迎合了喜欢科幻风格的以青少年为主的受众人群,运用宇宙飞船、外星球、机器人等典型的科幻元素,添加眩光等特效,与暗沉或者冷色调的背景一起营造出神秘的科幻感。
冷酷
这款手机UI设计风格酷炫,运用一些科幻电影中对话框和显示屏的素材,使整款设计看起来个性十足。
C64 M0 Y21 K0 R75 G190 B205
C78 M100 Y62 K47 R57 G17 B49
C0 M0 Y0 K100 R0 G0 B0
C95 M100 Y63 K40 R28 G25 B55
C100 M100 Y53 K8 R28 G42 B85
❶图标采用了圆角设计,并进行了一些质感和阴影上的处理,使整套图标呈现出冷酷的科幻效果。“极光”主题演绎天马行空的畅想。简单线条勾勒出的发光图标,像是一种吸引你去使用、去体验的召唤。
❷这款设计的布局居中,菜单采用了竖版构图,在天气面板中使用了科幻电影中的显示屏,与整体的风格统一。
❸整体色彩使用了比较冷酷的黑色、蓝色和紫色来搭配,质感强烈,十分符合科幻风格。
银河
这款手机UI设计运用游戏银河传说作为素材,采用宇宙飞船等科幻电影中常见的形象设计,整体把握松弛有度。
C100 M98 Y68 K59 R3 G13 B37
C83 M79 Y0 K0 R67 G68 B153
C100 M98 Y68 K0 R3 G12 B35
C40 M26 Y47 K0 R168 G175 B142
C100 M100 Y54 K7 R28 G42 B85
❶图标使用渐变和阴影,使其呈现立体化,并运用了白色的外框。这样,图标在暗沉的背景中更突出,方便用户直观操作。
❷采用横版布局,结构稳定,展现出严谨的特点。
❸色彩运用太空的蓝色、黑色等暗色,为避免深色调容易造成的沉闷感,用白色的字体和黄色的光加以提亮。
科技
这款手机UI设计采用星球和宇宙飞船的形象作为元素,在字体上进行了扁平简约的设计,更具科技感。
C21 M30 Y57 K0 R210 G181 B120
C53 M0 Y16 K0 R121 G202 B216
C98 M91 Y61 K44 R10 G32 B57
C59 M50 Y47 K0 R124 G124 B125
C93 M76 Y42 K5 R27 G72 B110
❶科幻风格的图标采用立体仿真的设计思路,图标具有趣味性、易识别的特点,想象独到。
❷布局采用常见的横版布局,界面清晰直观,布局紧凑,秩序感强。
❸背景颜色运用深蓝色,代表着广阔无垠的宇宙,而图标使用了比较明亮的颜色,深色与浅色的对比凸显了图标的实用性。
神秘
这款手机UI设计采用的素材非常独特,在背景中一个盒子散发出一丝神秘的气息,让人忍不住想打开它一探究竟。
C0 M0 Y0 K0 R255 G255 B255
C87 M63 Y73 K32 R32 G71 B64
C0 M0 Y0 K100 R0 G0 B0
C56 M0 Y30 K0 R112 G197 B190
C67 M81 Y78 K49 R70 G41 B38
❶图标的设计呼应了盒子这一主题,给简约的图标加了两层不同颜色、不同效果的外框,并做了微倒角处理,使图标在视觉上整齐而有序。
❷横版布局稳定,日历版块设计块面化,设计感强烈,主界面留有较大空白,给人想象的空间。
❸背景使用黑色作为主体颜色,用绿色表现神秘气息,两种颜色相得益彰。