以用户需求为中心的手机App界面设计流程_骆鹏州.pdf

127数字艺术随着智能手机和移动互联网相关技术的不断发展和普及，各类手机App已逐渐成为帮助人们进行网上信息交流、查询、购物、业务申办等相关活动的重要途径和渠道，同时也为相关行业实现“移动互联网+”的业务模式升级换代，提供了有效的技术支撑。App 界面设计质量对 App 的用户使用体验、用户评价、用户存量和用户忠诚度等，都产生着重要影响。如何在有限的项目设计周期内，通过以用户为中心的、合理的整体设计流程，让项目更加平稳、顺畅、高效地得以实施，成了各个专业界面设计团队十分重视，同时也需要不断研究和改进的重要问题。近年来，随着业界相关实践经验的不断积累，逐渐形成了一套比较常用的、规范的、以用户需求为中心的设计流程，大致包含以下步骤：一、项目调研分析手机 App 用户界面的设计目标，主要是帮助用户利用手机终端轻松便捷地满足网络信息查询、沟通交流、学习、娱乐、购物、业务申报和办理等相关需求。而各类手机 App 的设计委托方和运营单位（比如各类政府部门、非赢利组织或企事业单位等）的主要业务相关用户群体，在用户分布、用户特性、用户群体规模及其相关用户使用需求等方面，都各有各的具体情况。因此，在进行项目规划设计之前，需要对上述情况，以及项目的总体市场背景、宏观需求和发展趋势、市场竞争格局、创新改良空间、推广应用前景等相关问题，进行系统全面的资料收集、调研、和分析评估。在此基础上，进行严谨的立项分析和论证，对项目的总体目标进行界定，并围绕该目标，有的放矢地展开后续相关研发工作。（一）项目市场应用背景和发展前景调研分析随着科技的不断发展和改良，居民收入水平和消费能力逐步提升，以及自然地理环境和季节气候变化等因素的影响，人们的日常生活和各类需求，也会随之而发生相应的变化，进而对相关产品和服务产生新的消费和使用需求。因此在项目设计前期，需要对项目的市场应用背景进行调研和分析。首先可以对各类政府部门、税收统计机构、金融机构、社科调研机构、专业财金媒体等正式发布的，具有较高可靠性和公信力调研分析数据，进行收集、分析和借鉴。如果项目预算充裕，还可以聘请专业调研机构，针对项目需求，制定和实施更有针对性的、量身定制的更加系统而精准的调研方案。对本项目相关行业的市场背景、用户群体分布、用户特性、用户规模，项目市场发展机会和前景，各种发展影响和制约因素，项目立项的必要性、可行性等，进行更加严谨的分析、论证，为项目的立项决策等提供参考。（二）用户群体和用户需求调研分析为了让项目作品能够更好满足目标用户群体的实际使用需求，需要在项目规划设计之前，对项目的目标用户群体，及其对相关产品、服务和 App 的具体使用需求，进行系统、全面又深入细致的调研分析。调研的主要内容包括：项目的主要用户群体的地域、年龄、性别、职业、受教育层次、消费需求层次等分布情况；用户对相关产品、服务、App 的具体使用目的、使用过程、使用需求、使用体验；使用过程中存在主要困难、问题的风险点；问题反馈、获得帮助、解决问题的机制和流程；用户对相关产品、服务、App 操作任务流程的认知、判断、学习机制，以及对相关使用体验的评价因素、评价标准等。调研的主要方法大致包括：问卷调研、用户使用过程和使用行为观察、用户访谈、焦点问题讨论、行业专家分析论证等。可以先运用现有的网络调研平台，初步进行问卷调研，了解用户的年龄、职业、地域、使用需求、偏好等信息。再根据初步调研情况，制定更有针对性的，更加系统、深入的调研计划。对上述调研计划进行分析、评估、审议通过之后，再组织相关人员对其进行实施，展开各项具体调研活动。然后，对通过调研活动获得的相关资料和有效反馈信息等进行汇总、整理、比较、分析。再根据分析结果，编制调研工作报告。并与以用户需求为中心的手机 App 界面设计流程文/骆鹏州摘 要：手机 App 用户界面的设计质量，对 App 的用户使用体验、用户存量等具有十分重要的影响。采用以用户需求为中心、规范严谨的项目总体设计流程，通过项目市场背景和用户需求调研分析、目标定位、整体规划设计和规范化的制作实施等相关步骤，不仅可以让 App 用户界面设计项目的设计目标更准确地与用户需求相匹配，同时还能帮助设计团队在有限的设计周期内，更加规范、平稳、高效地实现项目目标。关键词：手机 App；界面设计；项目流程DOI:10.16129/ki.mysds.2023.04.013128创意2023/04项目设计团队成员、委托方代表、用户需求分析专家一起，对调研工作报告进行分享和讨论，并针对调研工作的不足之处进行二次调研，不断改进和完善。（三）同类 App 研究分析近年来，不少企业和组织机构都在尝试为具有各类需求的用户提供有针对性的、经过精心研发设计而方便实用的手机App，并从中积累了大量可供参考的实践经验。因此，在项目前期，可以对与项目相关的上述同类 App 进行下载和试用，对它们的设计方法和思路，比如它们的用户需求定位、功能规划、业务特色、交互流程、外观设计风格等，进行深入研究和分析，以便对它们的成功经验进行参考借鉴，同时对其不足之处进行改进和完善。（四）制定项目整体目标在上述调研分析的基础上，可以组织项目经理、客服、项目所属行业需求分析专家、项目委托方代表等相关人士，对调研结果进行分析、研讨。对项目的目标用户群体、用户需求（可大致分为核心需求和相关附属需求等）、用户的常见使用情景等，进行界定。并以此为依据，确定项目需要实现的具体功能和整体目标，以便围绕上述目标，对项目研发所需的相关人员、设备等资源配置，计划周期、组织分工等，进行统筹和规划。二、整体功能规划和信息架构根据上述项目目标，针对用户需求，对项目预计包含的主要功能、次要功能和附属功能，以及相关的用户界面信息架构，进行系统的分析和规划设计。通过树状图、功能模块列表等形式，对各个功能模块之间的类属和逻辑层次关系，进行梳理。这时需要对各个共能信息模块，需要进行归纳和分类，把内容相近、关系紧密的模块归为一个大类，以便用户查找。信息模块的名称应简练而便于区分，尽量避免发生概念上的交叉重叠，以免用户产生误解和混淆。通常情况下，App 的首页界面上应包含大多数用户最常用的主要功能信息模块和重要消息，这些常被称为一级模块。每个一级模块中又常常需要包含与之相关的，细分的二级、三级、四级等功能信息模块。在模块规划上，需要注意的是，如果模块的层级过多，用户在浏览和查询相关信息时就比较容易“迷路”，因而降低用户对 App 的使用效率。因此，界面模块的层级一般保持在 3 5 级左右为宜。三、确定项目设计尺寸规范目前最主流的智能手机操作系统是 iSO 和 Andriod 系统。这两种系统都参照人机工程学、设计美学等相关原理，对操作界面的整体尺寸，和其中所包含的各类界面组件的大小尺寸等，进行了大量的研究，经过反复的设计试验和效果测试，逐步形成了目前广受用户认可和接受的界面设计规范。并在其官方网站上发布了相关设计指南。尽管项目设计团队完全可以根据特殊的用户需求专门制定一套独特的界面设计尺寸规范。但目前在大多数情况下，面向社会大众的日常需求而设计的 App 界面，为了更好地与上述两大系统的操作界面进行兼容，一般都会对其设计指南和其中包含的上述尺寸规范等进行参考和借鉴。目前国内研发团队较常用的方法是，先参照 iOS 系统主流机型的屏幕尺寸和相关常用界面组件的尺寸规范设计一套界面交互原型。待该原型通过测试和验收之后，再在其基础上对界面设计组件的尺寸和间距宽窄等进行相应调整，使之能与iOS 和 Android 系统其他机型的界面尺寸进行适配。通过上述方法，就可以让同一款 App 在基于这两种操作系统的常用手机屏幕上，都保持一致的界面外观效果。让用户在这两种系统的手机上使用同一款 App 时都不会感到陌生，从而减少可能由此带来的不便。四、交互流程设计根据上述整体功能和信息架构规划，就可以进一步对各个功能信息模块中所含界面的交互顺序和流程，进行构思和规划设计。其中主要包括：信息分类检索、搜索、检索标题列表、具体信息呈现相关流程；用户注册、登录、个人账户信息管理流程；商品或服务选购流程（含商品分类查找、比较、关注、加入购物车、购物车管理、优惠促销、下单、结算、订单管理、物流跟踪、售后服务、换货退货、反馈评价，等相关业务交互流程）其他服务的相关业务交互流程。针对网上业务办理的功能模块，设计时需要站在便于用户操作和使用的角度，对相关业务的申报、受理、执行、监管、反馈等过程进行分析，并对各个步骤需要用户填报的各项具体信息和完成的操作任务进行具体规划。同时还需要考虑对用户点击执行的相关操作任务（比如下载、上传文件等）的完成进度进行反馈，并对用户忘记密码，或在填报和操作时可能出现的相应错误等，提供相关修改提示，能够引导用户及时纠错，顺利完成相关操作任务。总体上，上述各类功能、各项业务的交互流程，都是为了帮助用户快速、安全地完成各类信息查询、交流和业务办理等相关任务。因此，在设计时要注意业务流程的合理性、便捷性和安全性。五、低保真界面交互原型设计在 上 述 工 作 的 基 础 上，可 以 运 用 Adobe XD、Sketch、墨刀、Axure 等设计软件，对各个模块中包含的一个个界面的主要内容，进行简明、直观的草图设计。设计时，只需要借助不同亮度的灰色线框、色块等，对每个界面中需要包含的功能组件（比如状态栏、搜索栏、标签129数字艺术栏、以及各类按钮图标等）和主要内容（比如标题、副标题、文本框、图片框、视频播放窗口等）的外形轮廓、大小尺寸、间距等进行构思和简要绘制，从而体现出每个界面的主要功能和整体布局形式。在该阶段，暂时还不需要对每个界面中包含的标题、文字、图片、视频节目、按钮图标等具体内容，进行详细的呈现。因此，本阶段完成的界面设计图都只是简明的线框布局草图，常常被称为低保真界面原型设计图，可以快速地呈现出界面规划设计的大体效果。上述工作完成后，还需要继续运用上述软件，参照前期完成的交互流程规划方案，为每个界面中包含的各种功能按钮，添加相应的交互指令，从而制作出具有基本交互功能，并能够在手机上进行操作演示的低保真界面交互原型。设计团队可以邀请项目委托方代表、用户代表和行业专家等相关人士，共同对该交互原型进行试用、测试和研讨。并根据发现的问题和相关建议，对上述交互原型进行修改和优化。六、制定整体视觉风格设计规范通常，人们在使用一款 App 时，都不仅仅只是满足基本的使用需求，往往还会在使用的过程中，寄寓对理想生活品质的追求和对某种特定消费文化和价值的认同。因此，在项目设计前期，还需要在上述低保真原型设计图的基础上，为各个界面中包含的各类标题、正文、列表的字体样式、段落样式、数据图表（比如柱状图、饼状图、网状图或其他信息可视化图表等）、插图、通用组件、按钮图标等，制定统一的外观风格和相应的设计规范。将该规范分发给项目组中包含的美术设计团队成员，以便大家在分工合作和分头完成设计的过程中，保持一致的整体风格。并通过这种整体风格，来体现该 App 的品牌个性、所追求的特殊品质和倡导的消费文化。七、高保真界面交互原型设计项目组中所含的美术设计团队，可以在低保真界面设计原型图的基础上，对每个界面中包含的各种标题、文字、列表、数据图表、背景图、插图、按钮图标、媒体播放窗口等，添加相应的具体内容。并运用 PS、Ai 等设计软件，参照上述外观风格规范，进行更加精细化的外观设计。使界面的各种细节、纹理、色彩层次更加丰富，插图更加真实细腻，让界面的视觉外观效果更加美观、完善，呈现出 App 未来准备发布时的实际效果和艺术品质。因此，业界常常把本阶段完成后的设计图称为高保真界面原型设计图。下一步，需要借助上述 Adobe XD、Sketch、墨刀、Axure 等设计软件，为每个高保真界面图中所含的功能组件，添加交互指令，制作出可以在手机上点击、操作、演示的高保真界面交互原型。并邀请设计团队成员和相关人员，对上述高保真原型，进行测试、研讨和修改完善。八、适配各种市场主流机型的屏幕尺寸由于各家手机厂商都不断对产品进行升级换代。因此，目前 iOS 和 Andriod 系统，都分别有好几种不同屏幕尺寸的主流机型。所以，在上述高保真界面原型通过测试、评审、定稿之后，就可以用它作为样品，参照其它机型的屏幕尺寸，对界面的画幅尺寸，以及其中包含的各种标题、字体、图片、按钮图标的大小尺寸和间距等，进行适当的调整，随后将其保存为能够与其它主流机型的屏幕尺寸相匹配的版本。九、切图和添加程序代码接下来，项目组中负责上述界面外观设计的美术团队，需要与负责添加代码的程序团队进行沟通。根据程序团队的需求和相关切图规范，对高保真界面原型图中所包含的各种插图、数据图表、按钮、图标等进行切图。将它们从原来的界面设计图中分别切割和提取出来，并保存为一个个单独的图片文件。保存时，需要按照统一的命名规范对文件夹和图片进行命名。以便让程序员可以通过这些切图的文件名，及其所属文件夹的名称，对其所属的机型屏幕版本、信息功能模块、具体界面名称，及其类型和功能等，进行区分。在编写程序代码时，对这些图片进行快速的搜索、查找和调用。同时也有利于在后期维护中对需要更新的图片进行查找和替换。程序员在收到上述切图，并与美术设计师进行沟通和工作交接之后，便可参照上述高保真界面交互原型，编写相关程序代码，将原型转化为能在手机上运行的真实界面。相关工作完成后，可以请项目团队成员、委托方代表等一起对界面的实际效果进行测试和修改完善。十、验收、交互、运营和持续改进最后，可以组织相关部门一起，进行项目成果验收和交付。随后即可进行 App 的宣传推广和市场发布。继而进入 App 的实际运营阶段。在此过程中，需要及时收集和分析用户反馈的各类问题，并在此基础上对 App 进行持续改进和版本迭代。上述步骤，是目前国内从事手机界面设计专业公司和团队，较为常用的项目整体设计流程。其核心原理是以用户需求为中心，在对用户需求进行详细研究、分析、把握的基础上，制定清晰而具体的项目整体设计目标，并围绕上述目标，参照行业相关手机界面尺寸和设计规范，有条不紊地展开 App 用户界面功能规划、交互流程设计、视觉外观设计、交互原型设计等相关工作。在产业实践的过程中，不同的界面设计项目团队往往会根据各个项目的具体需求、整体规模、项目预算和资源配置条件、人员分工的细化程度等相关情况，对上述个别环节进行适当简化、合并或同130创意2023/04步实施。但项目的整体工作思路、方法和流程，是基本相通和大体一致的。由于国内手机界面设计相关行业的发展历史还不算太长，目前大部分专业教材和参考文献主要都集中在对相关软件操作技巧和美术设计原理的介绍上，对项目的整体规划设计思路和流程进行整体介绍的资料相对较少。因此，作者结合自身在界面设计方面进行学习、研究和积累的一些实践经验，以及近年来指导学生完成相关本科毕业设计项目的教学经验，尝试对上述项目流程进行了简要梳理和介绍，希望能对相关专业的同学或刚入行的从业者们，提供一些参考和帮助。由于作者的经验有限，也很希望能得到业界同仁们的宝贵意见。参考文献：1 吕云翔.UI 交互设计与开发实战 M.北京：机械工业出版社，2020.2 王雨典.试析基于用户体验的手机界面设计 J.大众文艺，2021（3）：37-38.3 陈丽，刘慧琼.媒体界面交互性设计的流程和原则 J.中国远程教育，2006（4）：22-30.4 王怡琛.以交互设计流程为导向的实训式图标设计教学实践探索 J.卷宗，2021（6）：216.5 耿阳，赵炜浓.融合参与观察的用户界面设计方法研究 J.设计，2020（9）：44-46.6 梁哲，穆冰玉，温丽琴.UI 界面设计 M.石家庄：河北美术出版社，2018.作者简介：骆鹏州，成都东软学院数字艺术与设计学院硕士、副教授。研究方向：美术设计、数字媒体艺术。随着互联网的普及，网络游戏成为大众主要的休闲娱乐之一，对此无论是持乐观态度还是忧虑重重，都无法忽视游戏逐渐成为年轻群体日常生活的一部分这个事实。王者荣耀 作为当今最火爆的手游，2021年玩家数量突破6亿。2022 年经过官方正式统计数据，王者荣耀最高同时在线人数破 100 万的记录，日活跃用户在 750 万。大量的用户群体使得它有了举足轻重的文化话语权。作为一个游戏，王者荣耀无疑是成功的，而游戏角色的设计是其成功的一关键因素。王者荣耀中的角色多数以中国传统的神话人物与知名的历史人物为原型，通过加工塑造，使他们在网络中以新的形象重新活跃在人们的视野中。传统文化人物遇到网络游戏碰撞出新的火花，在互联网语境下讲述新的故事，本文以王者荣耀中西施、王昭君、貂蝉、杨玉环的游戏角色设计为这一现象的代表，看传统文化中经典的“四大美女”们，如何在当今网络游戏语境下讲述新的故事，以及其中所折射的当代女性社会地位的变迁。一、从流传到建构中国传统“四大美女”故事的演变“四大美女”是中国传统女性美的代表，是家喻户晓的“美”之代名词，但她们的形象在每个时代都会加入新的元素，融合时代特征，不断地饱满丰富，最终成为我们网游语境下“四大美女”形象设计折射的女性地位变迁以王者荣耀为例文/徐 力 李兴华摘 要：“四大美女”是中国古代美女的代表，通过各时代文学、戏剧的不断创作，她们的个性从模糊到鲜明，从形象单薄到丰富，最终成为我们熟知的形象。过去她们活跃在文本和戏台之上，如今随着互联网发展，网络游戏盛行，她们的故事有了新的载体。王者荣耀 作为目前热度最高的手游，对“四大美女”的解读与再构具有相当的代表性。通过梳理四大美女故事的演变，与她们在 王者荣耀中的形象设计，探究“四大美女”形象在当今网络语境下呈现的突出视觉美、去宏大叙事、摆脱附庸地位的新特征，以及其中所折射的当代女性理直气壮追求美、去除传统礼教束缚、更加独立自主的社会地位。关键词：王者荣耀；四大美女；形象设计；女性独立实习编辑：杨芳