基于全链路思维的界面原型设计研究.pdf

随着科学技术的发展，产品的更新迭代竞争愈加激烈，拥有全链路设计思维理念有利于使产品更好地贴近用户心理，进而实现其商业价值。该研究从全链路设计思维出发，结合格式塔心理学等理论开展研究，研究方法包括文献研究法、案例分析法、实践论证法、问卷调查法、对比研究法。论述逻辑为商业需求文档市场需求文档产品需求文档竞品分析用户调研用户旅程体验地图功能分析信息架构原型设计原型交互设计。关键词：全链路；格式塔；原型设计；原型交互全链路设计思维是提升用户全局体验感的设计方法，具有逻辑性、全局观，具备相互贯穿、互相协调的能力。全链路设计思维可以帮助设计者了解到最真实的用户需求，使设计更加多元，具备全链路设计思维的产品经理能在资源分配上更加合理，同时最大效率地对全局闭环设计路线进行商业化产品转现。杉浦康平在书籍设计中提出了“艺术 工学=设计”的理念，强调了设计与技术并驾齐驱的设计思维。在纸媒向数媒发展的过程中，2016 年阿里提出了全链路设计概念。1这与罗德岛设计学院院长前田约翰（JohnMaeda）在 2019 年的科技中的设计 （Design in Tech Report）中提出的“TBD=T（技术）B（商业）D（设计）”的理念相类似，即要在项目开发中进行全渠道布局，减少各环节中由认知断层导致的工作效率降低的问题，从而最大化地提升用户体验。2本研究从全链路思维出发，以用户体验要素的战略层、范围层、结构层、框架层3为逻辑思路，论述了依据用户需求采取的设计策略之道。一、战略层确定假设成立（一）商业需求文档（Business Requirement Document，BRD）商业需求文档用于确定项目的可实施性，是以商业价值为主要依据的产品需求文档，内容多以商业价值、产品定位、成本要求、风险评估及规避方案为主。商业需求文档的对象通常由项目决策者、技术决策者等参与决定，是呈现给投资方的有效依据。通常是项目立项的分水岭，从战略层面确立项目目标及最简可行产品（MinimumViableProduct，MVP）。通过假设、验证、分析使方案在用户真实需求中进行循环迭代。（二）市场需求文档（Market Requirements Document，MRD）市场需求文档采用PEST的分析方式，从政策（Policy）层面、经济（Economy）层面、社会（Society）层面、技术（Technology）层面分析项目背景带来的有利优势。4政策层面上，以教育政策为例，可以寻找联合国教科文组织或中华人民共和国教育部发布的政策信息。经济层面上，可以寻找恩格尔系数（EngelsCoefficient）作为数据支撑。社会层面上，可以使用新闻数据。技术层面上，以 VR（VirtualReality）为例，可依据中国电子技术标准化研究院编制的虚拟现实产业发展白皮书。SWOT 分析法，也称道斯矩阵，即态势分析法，是由旧金山大学的管理学教授海因茨韦里克于 20 世纪 80 年代初提出的，以优势劣势为 X 象限、以机会威胁为 Y 象限分析优势机会战略、优势威胁战略、劣势机会战略、劣势威胁战略。通过市场前景、技术支撑、用户需求分析产品的可用性需求。（三）产品需求文档（Product Requirement Document，PRD）产 品 需 求 文 档 要 求 深 度 挖 掘 用 户 资 源，用 户 分 为C（Customer）端用户和 B（Business）端用户，B 端产品面向企业，C 端产品面向个人。无论是 C 端产品还是 B 端产品，都面临着两个问题，即是进行从 0 到 1 的研发还是对已经上架的产品进行迭代更新。以研发为例，分为两种情况，一是有竞争产品，二是无竞争产品。无竞争产品可以直接进入目标用户的研究阶段，有竞争产品则需要开展竞品分析，分析其优势、劣势，分析其 Slogan。以运动 App 为例，Keep 的 Slogan 是“自律给我自由”，咕咚的 Slogan 是“智能运动，尽在咕咚”，由此可以看出 Keep 吸引的用户群体是本身就有自律习惯和希望进入 Keep实现自律的人群，选择咕咚的用户群体则是想要体验智能运动的生活。反向思索是在开始设计产品或者新功能之前，首先要弄明白是什么让用户或者潜在用户感到难受，即痛点驱动设计（Pain-DrivenDesign，PDD）5。二、范围层用户需求深度解析用户挖掘从定性研究和定量研究两个角度出发，定性研究指的是通过电话访谈、面对面访谈、网络访谈等方式获得结论的研究，定量研究通常是指通过量化的数据来分析某项功能的83总第236期/2023/3/文创设计有效性的研究。例如，一个学生团队准备对校园垃圾分类箱进行产品的投放及用户端 App 的研发，产品的用户群体分为学生及教职工群体、校园垃圾整理服务人员、投放管理运营人员等，定量分析如采用问卷的形式对学生群体和教职工群体进行数据采样，而针对校园垃圾整理服务人员可以采用面对面访谈的形式进行定性分析，针对投放管理运营人员则可以选择焦点小组访谈法进行定性研究。在用户调查问卷的制作上需要科学地设置问题，理解答案即功能，普卷调查应尽量选择单一变量，不要试图在问卷中影响用户的决策和判断。如果是已经上架的产品要进行产品迭代，应就用户需求在产品功能中加入用户埋点测试，通过用户浏览页面、点击事件得出数据流进行定量分析。定量分析输出的结果是图表和统计数据，以问卷星为例，其输出的图表可分为柱状图、饼状图、关联矩阵和交叉分析。图表中可以直观地看到用户需求结果。定性分析的输出结果可以有聊天记录、笔录文档等，它们可以被整合成用户画像分析图。通过定性研究和定量研究或混合研究后可以得出功能需求提炼表单，以“哔哩哔哩”为例，用户调研结果中有占比较多的人希望观看完视频后与 up 主互动，那么在功能需求提炼中可以分析出场景为“用户观看视频”，需求为“产生与 up 主互动的行为”，在“用户需要什么样的互动行为”问题的答案中提炼出功能为点赞、收藏、转发、评论等。用户旅程体验地图是为了系统地分析用户在 App 中的整个心路历程，选择一类人群或几类人群在 App 使用前阶段、使用阶段和结束前阶段，记录使用产品的多项核心功能，或在服务的过程中，生成分析其行为、触发点、情绪状况、痛点及机会的视觉化地图。通过问卷结果、用户画像、功能需求提炼表单、用户旅程体验地图，综合完成痛点分析及功能转化、特色功能提炼、阶段性功能需求细化等工作。功能优先级排序可以使用 KANO 模型分析，KANO 模型是东京理工大学教授狩野纪昭（NoriakiKano）发明的对用户需求进行分类和排序的有效工具，可以通过分析用户对产品功能的满意程度实现对产品功能的分级，从而确定产品实现过程中的功能优先级。三、结构层信息架构的确立在战略层考虑好产品定位，在范围层考虑好用户需求，接下来进入结构层。信息架构是产品的思维脉络，因为在前期准备时已经确定好了功能，所以现在可以直接将功能分类引入 App 产品的架构逻辑中。以微信为例，4 个横向逻辑功能是看与人沟通的消息、联系人有哪些、朋友圈视频号以及个人设置。在提炼出最终版本的信息架构图之前可以先完成功能架构梳理图，然后在功能架构的基础上标注上于信息架构图上最终在 App 上看到的文案名称。四、框架层原型设计雏形在框架层制作 App 原型，即借助信息架构图里的思维在界面原型中布局，步骤可分为原型草稿、低保真原型图、中保真原型图、高保真原型图、原型交互逻辑图。原型草稿可以处理信息设计问题，可以逻辑性地将信息编入手机模型尺寸中。低保真原型图制作处理版式设计、信息层级模块。中保真原型图负责所有文字设计。高保真原型图则可以加入色彩、Banner 图片、Icon 设计、按钮设计，最终实现在手机终端的直观视觉呈现，它相当于一个高级模型，更适合做展示用，并不等同于真实的产品。6（一）原型尺寸在原型尺寸制作上，分为 Web 端和手机端，手机端分为IOS 系统和 Android 系统尺寸，如果页面是通过网址打开的，如在手机界面打开学校网页，需要实现页面在手机屏幕尺寸下的自适应调整，那么便需要在网页代码中输入 CSS 样式。以 mediascreenand（max-width：500px）为例，它既可以为页面屏幕小于 500px 时输入适合手机屏幕尺寸的布局，也可以直接使用 Bootstrap 来制作响应式页面来调节在 Pad、手机、电脑界面中的自适应布局。通过响应式布局或 CSS3 多媒体查询使网页布局根据浏览人所使用设备的尺寸大小进行匹配，达到相应页面的布局效果。当通过 IconApp 打开页面时，原型设计工具有 Axure、AdobeXD、Skech 等，通过网页版实现的有墨刀、慕客等。因为使用到的工具很多，在产品交付时会面临统一的问题，所以需要由团队协作平台 Figma、Pixso、即刻设计等进行原型设计。以 Figma 为例，在原型界面尺寸中可以直接快捷地选择 IOS 系列版本的 1X（一倍）尺寸进行设计，虽然它们属于同一系统，但因为型号不同、尺寸不同，其所呈现的高保真界面原型比例也不同，需要在制作原型设计中善于使用约束按钮对制作的原型进行多模化，即做完一种尺寸即可快捷调整为其他尺寸而保持界面比例不改变。（二）设计区域制作原型界面的工作要注重规范性，在设计时需注意将系统自带的规范尺寸去除，在安全区域进行设计，安全区域的划分方法为屏幕亮起的所有范围减去界面最上方的状态栏（包含电量、时间等信息的区域）和紧挨着的标题栏（包含搜索框、当前页标题等信息的区域），再减去最下方的主 Icon 放置区和Home 键区域，同时减去中间剩余区域的左右边距，剩余部分即为视觉设计师可设计版式的区域。（三）设计内容点击 Icon 弹出的第一页面为启动页，通常会放置企业 Logo、Slogan 的信息，有些是静态的（如网易云音乐），有些是动态的（如学习强国），通常不超过 1 秒就会直接进入主页，也有些会进入闪屏页，闪屏页会放置近期主题活动信息，通常 3 秒之后就会进入主页，浏览器可以点击跳过。其次是引导页，引导页分为两种交互方式：一种为讲述核心功能或发布最新功能时可滑屏的三页界面，最后一页的引导页按钮多为“点击体验”，如支付宝的年底统计页面、网易云音乐的年度听歌报告等。在特定的发布时间，为了方便用户使用，会在第一时间提醒用户进入活动功能页。另一种引导页多出现在版本迭代更新时，页面会使用遮罩的方式让用户将页面改版的地方通过“下一步”的方式走一遍，最后设置完成按钮。在登录页，用户可选择快捷方式登录、手机号码验证码登录、刷脸登录等方式进入界面的横向逻辑页中，在首页界面功能区中，分为搜索区、Banner区、金刚区、瓷片区、产品瀑布流布局区。Banner 也称为广告条，在网页界面中呈现时通常放在 App 首页设计中安全区域的最上方，以左右滑动的方式切换，靠近图片下部会有被选中的亮色圆点、圆角矩形条或未被选中的浅色图形，作为交互提醒。Banner 区下方紧接着金刚区图标，金刚区中的图标多为 App 的84/总第236期/2023/3文创设计活跃主功能，方便用户能快速进入纵向逻辑页面，以医院类App 为例，金刚区图标的第一位是挂号功能。瓷片区是区别于Banner 排版的另一种分块区的运营位置，瓷片量多为两片或四片，内容多为产品图片或活动主题视觉图、文案等。紧接着是产品瀑布流，分为视频流和图片流，优势是它可以在有限的界面空间内呈现大量丰富多样的浏览内容，缺点是因为量的关系，用户要找到自己想要的产品，需要耗费一定的时间进行筛选。以淘宝为例，我们作为用户不难发现，在置顶区域的产品通常为最近搜索过的产品，而这是由大数据算法自动推送的。（四）组件规范在搭建原型界面时要注意文字的标准规范大小，文字颜色的深浅，段落文字的字距、行距、段间距，版块界面之间的距离，标题与图片之间的距离，Icon 与文字之间的距离，说明文字、辅助信息与图片的距离，等等。从视知觉的格式塔原理出发，这里的图标和图标挨得近、整体和 Banner 区域离得远，遵循的就是接近性原则；界面里的相同物体看起来归属于同一组块，遵循的是相近性原则；而瀑布流的部分则是遵循连续性原则和对称性原则；在瓷片区部分或 Icon 部分，主视觉图形不再用圆角矩形作为包围背景来显示；而是用视觉图形直接设置界面，这里遵循的是封闭性原则，人类视觉感受器倾向于看到整个物体，界面中的卡片式设计遵循的是主体和背景原则。7在技术方面，以 Figma 为例，文字的样式和颜色规范可以直接使用新建文本样式并命名一级标题或二级标题等名称，规范整个团队在制作页面时的统一标准，颜色可以添加颜色样式。距离内容可以通过 Figma 中的自动布局来对 Padding 和 Margin 的数据进行记录。将此文件创建为组件，即可得到母版规范文件。样式及组件可在资产中点击上传样式及组件发布，以便整个团队人员共享，也可以在团队成员中邀请团队人员加入组长团队，在共享文件中进行实时制作。（五）组件变体在搭建原型界面时要注意点击前、点击中、点击后的状态页面，同时要注意对网络断开时缺省页的设计，其在细节交互上的表现有置顶状态、常态、有标记状态等。这些状态的制作可以借助 Figma 中的变体实现，可以通过命名植入代码，如当导航栏中的按钮在每一页中的状态不一样时，被选中的为当前页面，此按钮就会呈现为点击后的状态，其他按钮为未点击状态，这些按钮的命名中可以输入“开关=on/true”或“开关=off/false”来识别合成为变体，而复制出的子版文件的状态可调控。在制作交互逻辑时，关注界面中是滑屏处理、点击还是拖拽，登录界面中的交互有当前键入文字的状态，键入账号和密码后登录按钮即亮起。原型框架及交互说明是沟通各个环节的有效文件，要求传达时务必清楚、规范，一旦表述不清，出现歧义，开发出的成果可能就会出现偏差，同时会影响开发工作的节奏和效率。原型做好后，其尺寸规范可以借助马克鳗测量工具对空间尺寸、字体大小、颜色等进行严格标注，并将其作为和前端开发团队沟通的文件，标注的尺寸需注意要和前端开发框架的高度、Margin、Padding 的尺寸、位置一致，避免在前端开发时用不上标注导致计算的时间成本增加6。五、原型交互说明使用代码语言在对原型文件做好交互逻辑后，应配合交互制作说明文件，如限制类说明。如在选择年份时，当前框架显示的几个数值，即是范围值。还有一种为极限类说明，如在图片流或视频流显示区的文字说明，当超过两行时，用省略号显示。此外，还需要说明状态，如默认状态、置顶状态、标记状态、未读状态、已读状态等。文件中还包括手势操作说明，如点击、滑动、拖动、放大、缩小、长按、摇晃等。用户手势操作后的反馈动作可分为提示类、跳转类、动画类。总而言之，写交互说明时，除了要考虑静态页面外，还需要考虑各种动态情况；除正常情况外，还需考虑特殊和错误情况。在进行逻辑说明时，除文字说明外，还可以使用流程图，通过是否来判断用户的使用情况，如是否登录，“是”则继续流程，“否”则返回到登录页。另外还可以用“if”“else”“case”等代码语言进行交互说明7。六、结语全链路思维确保产品在实现过程中相互理解，相互促进，相互提供，相互分析，在整体设计路径中交叉影响，为产品的原型形成提供了全局设计策略，为后期的视觉填充及前端、后端设计提供了有效的沟通模型。参考文献：1 张军，陈思.基于全链路用户体验路径的无人商店创新设计研究 J.包装工程，2019，40（4）：21-29.2 刘沁.全链路设计基本要义解析 J.工业设计，2019，151（2）：81-82.3 黄晟.基于用户体验的 APP 设计研究 D.陕西：陕西科技大学，2012.4 迈克尔 希，R.杜安 爱尔兰，罗伯特 霍斯基森.战略管理概念与案例 M.刘刚，梁晗，耿天成，译.北京：中国人民大学出版社，2017：42.5 Laura Klein.精益创业 UX 篇高效用户体验设计 M.郭晨，马伟，译.北京：人民邮电出版社，2016：17-18.6 刘津，李月.破茧成蝶用户体验设计师的成长之路 M.北京：人民邮电出版社，2014：163.7 Jeff Johnson.认知与设计理解 UI 设计准则 M.张一宁，译.北京：人民邮电出版社，2012：9-17.作者简介：李瑞，女，山东泰安人，助教，硕士研究生，研究方向：视觉设计、数字媒体交互、二维/三维动效。