如何落实从框架到内容、设计的总结分享

小编:做为交互设计师如何落实好葱框架到内容再到设计的流程?一起看看来自京东的设计师@美霞将她的工作实践总结出来分享这整个流程的内容。

前言

频道页的交互设计,通常会拆分为下几个步骤,本文主要探讨落实设计的环节。

落实设计,即是在经过需求分析、方向定位之后,输出最终交互稿件的过程。对项目的分析思考、逻辑的梳理整合能力无疑是一个交互设计师的核心技能,而落实设计的能力在我看来,应该是设计师的基本功夫。前期分析定位需要有理有据,同样,在落实设计这一步上,也需要思考周全、反复打磨。虽然最终稿件的输出因人而异,但在框架到内容的过程里,也有一些方法和思路可以帮助我们提高效率,规避不必要的错误。以下是我在落实设计的一些步骤和方法总结。

壹 | 写在最前:内容填充一定是基于分析框架之上的

这一点准确来说,是贯穿整个输出过程中的。需求分析的结论和推导出的方向定位,并不单单是用来跟需求方沟通的,更是整个输出设计过程中的核心标杆。后续页面设计涉及的模块比重、整体调性等都是需要围绕前期分析的定位框架。

贰 | 整合信息

信息整合是着手设计的第一步,面对多样的信息,我们可以从以下三个方面去整理。

在前期的分析阶段,我们只会确立到模块的运营维度,到落实设计这一步,我们则需要清楚了解模块内展示的信息元素。在实际的项目设计中,需求方可能会向我们提供要展示的信息,但交互设计师也需要有自己的考虑,放置哪些信息能够更加凸显这个模块的运营维度。例如,对于商品单元来说,基本元素是图片、标题和价格,而对于特价秒杀楼层,单单只展示这三个元素还不足以体现优惠抢购。这个时候我们可以分析,有哪些信息补充可以使得这个维度更加凸显,如:①突出特价,可以用划线价、直降金额、折扣标签等。②突出紧张的促销氛围:可以增加活动倒计时、库存进度条和行动召唤按钮等等

理清楚每个模块的信息元素后,务必要和需求方沟通确认。因为在实际的项目设计中,信息总会有各种限制。先确认再设计,能避免后期因资源限制而返工。通常来说,我们会碰到的限制有如下两种:①没有该数据的来源  ②信息展示方式有限。例如运营方没有资源做一些需要视觉设计的图片,那我们在设计样式时只能避免需要他们重新处理图片的情况。

信息整合的最后一步需要明确各个信息之间的层次。划分层次可以从相关性和优先级两部分去着手考虑。根据相关性,我们对信息进行分类或归纳展示,紧密性更高的元素放在一起,这样能让用户在阅读的时候更加有条理地接受信息。而根据优先级,我们可以确定哪部分信息需要突出展示或者提前展示。

叁 | 样式设计

在梳理、整合信息后,我们需要把信息组合起来做展示。形式同样要凸显模块的运营维度,但在形式的选择上是可以多变且创新的。在这个过程,设计师的累积非常重要,它能让我们快速判断某种维度适合采取什么的样式。而累积的途径,除了平时需求项目的锻炼,多看多收集一些优秀页面设计的案例也非常有帮助。

肆 | 全局自查、打磨细节

页面基本内容都已经搭建好后,可以整体概览一遍,从全局的角度检查稿件,发现问题。全局自查没有固定的方法和角度,毕竟项目和所处平台不同,设计侧重也会有所差异。但是自查的过程应该避免没有思路地浏览,随意看到改到哪,这样没有针对性的检查出现错漏的概率会比较大。通常来说,我们可以按照层次递进检查,包括以下三个方面:

全局的信息布局是否能体现页面的氛围和调性,模块之间的比重是否合理,模块内的信息层次是否表达清晰等

页面的交互流程是否顺畅,触发器是是否能让用户清晰认知,页面反馈是否符合用户预期等

流程的分支状态是否补充完整,信息展示的极限情况等

京东设计中心

作者:美霞

(0)

相关推荐

  • 拨动情绪的内容设计

    一.文章概述 前言 短视频产品成为年轻用户社交娱乐的主场景,QQ在短视频社交的耕耘过程中,打造了丰富的发表能力,让用户更方便的记录生活精彩瞬间,同时也更方便的与好友互动,今天我们对设计过程进行复盘,将 ...

  • QQ软件发送网址链接为什么出现内容简介和微博分享?

    通过QQ软件跟好友聊天发送链接后有的会显示链接内容的相关信息,但是有的不会,这个是根据系统自动检测判定的.目前可以显示的基本是一些我司的官方网站或者是和我司有合作关系的大型网站,其他的网站暂时没有办法 ...

  • VR设计全过程经验分享

    这是一篇介绍VR设计的全过程的分享,我们可以一起来学习一下VR设计中,怎样做才能做好用户体验和流程设计. 交互设计与用户体验在VR设计中是尤为重要的,那么让我们一起来看一看,Alfa Laval这家公 ...

  • 手机备忘录内容如何生成图片并分享?

    一些使用手机备忘录软件的朋友会有疑问,记录的备忘录内容可以生成图片吗?如何生成图片并分享呢?一起来看看吧 操作方法 01 打开手机备忘录,新增一条备忘录内容信息: 02 找到想要分享的备忘录内容并点击 ...

  • 京东设计师:电商大促攻略页设计指南

    通常我们看到的旅游攻略.游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互.而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营销 ...

  • 泛泛而谈界面视觉效果的一致性(设计经验谈)

    原来的题目设想为界面视觉效果的统一性,但是"统一"这个词似乎有点敏感,怕触动萌点无数,而我也无意去设定一个什么什么的统一性来侃侃而谈,极为专业而考究,且毕竟是一篇博客文章,怕斩首细 ...

  • 怎样让前端工程师100%实现设计效果?

    小编:视觉设计师把产品的设计图做出来后,需要和前端工程师沟通协作开发出设计效果,那么视觉设计师该怎么做呢?今天就一起跟着作者@酸梅干超人一起来涨姿势吧! 知乎问题:视觉设计师是怎样让前端工程师 100 ...

  • 设计中你该遵守的20条规则

    在设计中,我们常被允许.鼓励打破设计规则,这时你至少需要知道这些规则,才能正确的打破它们. 本文列出了一些基本的规则和技巧,从字体.排版到色彩.样式,涵盖了大部分设计中常见的错误,帮助你在设计中避免它 ...

  • 3个基础的APP技术框架,UI设计师必知!

    信籽(手淘设计师):不知道大家有没有遇到过这种情景,当你做好一个设计方案,满心欢喜地给开发讲解方案的思路和创意时,开发突然说一句:"这个方案实现不了",这时你整个人都不好了,心里开 ...