第七章 综合案例（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 7 综合案例 7 本章将对前面章节所介绍学习的移动端界面设计进行归纳总结，通过案例的练习，帮助读者巩固之前所学到的知识点以及更加清晰的了解移动界面的设计与制作。 本节内容的设置旨在帮助读者通过对输入法皮肤设计制作的学习，更加全面的了解不同的界面设计特点，掌握更多元的内容。 软件的界面是软件与用户交互的最直接的层面，界面设计的视觉呈现效果决定用户对软件的第一印象。输入法作为大家使用电子设备必不可少的工具，也让人有了越来越多的选择。经济的快速发展，是人们的精神需求不断提高，对于输入法的个性化要求当然也不例外。 7.1.1输入法皮肤设计原则 在设计输入法皮肤制作时，清晰是首要的，包括字体选择、字号设定、环境对比度等,如图6-1所示。 综合案例 7.1 输入法皮肤设计制作 7 1.字体设计 让用户有效使用，保证足够明确的清晰是字体设计首要的人物。如何降低用户辨识时间？影响清晰的因素是多纬度的，其中包括：用哪种字体，字号怎样设定，文字和环境对比度的关系怎样等等。 选择字体的时候，至少要满足如下三点：①饱满，②简洁，③字母长宽比与按键相融合。选择饱满、无称线的字体，清晰简洁，无需花费额外的时间加以辨认，是输入效率保证的基石。 2.字号设计 字体确定后，需进行多字号对比尝试。并且针对不同的分辨率都要经过多次尝试适配，同时辅以用户测试，以找到最优选择。最终选择适当加大一点的字号，让字母与背景更好的融为一体，成为一个按键整体。并且对个别字母进行单独调整，以保证每一个字母的体量一致性。 3.面板设计 面板的整体色调设计，应考虑手机系统、应用场景、按键间对比等诸多方面，如图6-2所示。 综合案例 7 4.默认面板高度 综合考虑系统、竞品、以往版本用户调整反馈，分别给出默认高度建议值，以及最高最低调整区间建议。根据线上版本的跟踪数据分析结果，对默认面板的高度进行优化，以符合更多用户的基础使用习惯。 5.行间距优化 针对点击按键落点区域进行测试，测试得出：用户点击按键的落点位置整体偏下。实际点击的位置，比用户心里预期点击位置整体偏下。 所以在设计时增加行间距，从视觉上引导用户点击位置上移，提高实际落点，减少了误点下一行按键的几率，有效的提高输入的准确率。 6.图标一致性规范 对于输入法产品来说很多功能是特殊的，在一般APP中并不存在，如：面板切换、输入方式切换、全键盘、拇指键盘等……因此形成输入法产品特有的图标体系是非常必要的。 7.图标一致性规范 启用全新界面的同时对原有图标体系进行优化，根据产品特性采用面性图标为主，线性图标为辅的原则，同时对图标圆角、线条宽度等进行规范。 综合案例 7 8.语意优化 保证图标一致性是第一步，正是由于输入法产品图标特殊性，对于语意层面的提炼亦变得很重要。对于用户难以理解的图标进行优化，通过多种效果尝试并配合用户可用性测试的形式进行验证，确定方案迭代上线。 7.1.2输入法界面设计案例解析 1.输入法界面完成图如图 2.所用知识点： 本设计主要用到了 PS 软件中的以下几个命令： 矩形工具/钢笔工具/文本工具/ 综合案例 7 7.2 APP界面设计与制作 本案例以iPhone6的尺寸（750px×1334px）为例，利用AI来制作一个时下流行的iPhone端的App页面。 所用知识点： 本设计主要用到了 AI 软件中的以下几个命令： 椭圆工具/直接选择工具/膨胀/减去顶层/剪刀工具/锚点工具/弧形工具 iPhone端的APP界面完成图： 效果图呈现： 综合案例 7 7.3 移动端平板游戏界面设计制作 1.iPad端的游戏界面完成图： 效果图呈现： 综合案例