- Photoshop 移动UI设计基础与案例教程
- 周嘉
- 1250字
- 2025-02-21 04:56:32
1.1 认识移动UI设计
移动UI设计就是将移动通信和UI设计合二为一,结为一体。一个好的移动UI设计不仅能让软件变得有个性、有品位,还能让软件的操作变得舒适、简单、自由,并能充分体现出软件的定位和特点。
1.1.1 什么是移动UI设计
UI(User Interface)是用户界面的简称。UI设计是指对软件的人机交互、操作逻辑、界面外观的整体设计。主要分类有平面设计、Web前端设计、移动端设计、交互设计等。而移动UI设计以手机移动端为例,手机上的界面都属于用户界面。用户日常通过这个界面向手机发出指令,手机会根据指令产生相应的反馈。用户界面设计不仅要考虑如何让界面美观,还要考虑如何摆放按钮、控件、菜单等,将小部件结合成整个界面。

常用的移动端用户界面
提示
要想真正进入UI的领域,就必须先弄清楚在智能手机上呈现的APP客户端的操作系统、UI的设计、UI的布局和分类等问题。那么接下来,我们将带着这些问题来学习本章的内容。

音乐播放界面

游戏界面

购物界面

天气界面
1.1.2 移动UI设计的目的和重要性
移动UI设计的目的是让用户理解程序的用途,并快速地操作程序。外观和视觉感不是界面设计的主要目的,界面的主要目的是沟通,通过沟通让用户理解界面程序。
移动UI设计包括美化和交互两个方面。为了让读者直观地了解UI设计的重要性,下面用UI设计前和UI设计后的界面图进行对比分析。
设计前的界面没有明显的特点。
(1)界面过于简单,界面颜色单调,没有美感。
(2)“登录”按钮没有立体感,像阅读文字。
设计后的界面有了明显的特点呈现。
(1)界面内容丰富,具有时尚感和立体感。
(2)“登录”按钮使用了渐变效果,并增加其他选项。
(3)增加头像展示,添加其他的登录方式,使操作更方便。
设计后的界面更加舒适和美观,因此对于智能设备来说,移动UI的设计是非常重要的。

UI设计前

UI设计后
1.1.3 平面设计和移动UI的不同
平面设计涉及的范围非常广,例如,报刊、展示架、包装、封面等,而移动UI的范围基本被限定在移动终端设备APP上。移动UI特殊的尺寸要求、布局排版、组件类型等使很多平面设计者不能直接进行移动UI设计。
同一款UI设计在不同的设备上所呈现的效果不同。下面是同一款软件的UI设计在计算机和移动设备上分别所呈现的效果,可以直观地看到,即使是同一个功能页面,其所呈现的内容差距也是非常大的。

PC端主界面和登录界面

客户端主界面、登录界面和搜索界面
1.1.4 移动UI设计的重要元素
移动UI设计中有以下5个重要的设计元素。
布局和定位
布局和定位指的是界面的版面结构。
形状和尺寸
通过形状,让人迅速地对界面内容进行辨识。
颜色
界面内不同的颜色,代表的含义不同。界面中红色的按钮或控件表示危险、停止、警告等,而绿色的按钮则代表继续或成功,这两种是最常见和最明显的界面控件颜色的表达,当然,如果不是提醒式按钮的话,一般会根据界面颜色来设定按钮颜色。

比较常见的按钮颜色体现
对比
界面内设计的内容可以通过加强对比来提高辨识度,如黑白;而降低对比可以融合界面效果,界面中通过加强和降低颜色之间的对比,可以让用户分清界面内容的主次。
材质
界面内设计的不同材质的图标,会展示出不同的效果。

拟物化图标