产品中的模块化设计思维

image.png

前言

读了很多书,但没有运用那都不算是你的知识,每次阅读之后都需要形成自己的践行清单,什么是践行清单呢?从所听所看所思中真正经过深度思考,结合自身场景而得出来具体的,有指导性的行动方案。

本次阅读的是《支付宝体验设计精髓》一书,整理总结出关于如何进行模块化设计的目的方法,思路以及注意事项。

分享中的案例是阅读后,自己根据书中方法结合公司项目整理出的组件设计,更好达到学以致用。

也希望你读完后,能够针对所说所描述的方法步骤,结合自己项目为他们设定组件,并持续迭代更新。

1.什么是模块化设计?

广义定义:模块化设计是指对一定范围内不同的功能或相同功能不同性质,不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和组合构成不同的产品设计方法。

模块化设计可包含:产品流程,信息结构,交互方式,表现形式

2.使用模块化设计的意义

1.减少设计成本

2.通过模块间组合互换,满足差异化需求

3.保持良好体验延续性的同时,缩短设计周期,提高设计效率

3.三个步骤的模块化设计的方法

以产品视角从宏观到微观,再回到宏观的过程

3.1模块划分

将完成的用户路径进行拆分,并按照解决用户问题进行重新归类

怎么拆,拆多细?模块和控件有什么区别?

模块 > 控件
设计控件通常以页面基础元素为粒度,如字体,按钮,输入框等,保证视觉基本元素的一致性。
模块是一组控件的组合,也可以一页页面组合,赋予其解决某一问题,实现某个功能。

image.png

模块划分标准:

单一性:模块粒度尽可能小,一个模块以解决一个问题为主
完整性:内部流程应该是一个闭环,信息流上提供足够支持用户达到目标所需
独立性:模块之间弱耦合关系,已存关系降到最低,以便不同组件的互相利用

模块划分方式:

A:流程类产品划分:
有一个明确的目标,一系列的任务最终达到目标的产品闭环

1.分析业务需求以及用户目标
2.制定用户达成目标所需要的任务流程
3.根据任务阶段划分第一层级任务模块
4.根据模块内功能特征多少,决定是否划分子模块

以品骏达APP 寄件功能为案例


品骏达

B:内容载体类产品划分:
不以某个目的为主体,而是以内容聚合为主的框架,更注重内容信息分类,排序,筛选的划分

1.对全量信内容进行列举
2.确定分类的维度,并对内容筛选,排序,形成第一层级模块
3.对信息内容较多模块进行分析,拍段是否合并或再次拆分

以 先锋达 众包APP为案例


先锋达

3.2模块设计

复用性:复用性占比越高,产品稳定性越好
延展性:对统一功能模块,由于业务需求差异,设计时一定范围内容可扩展能力,兼容一定范围的差异性。包含对信息的多少,内容的参数,视觉表现等方面的宽容度
互换性:在不可复用模块时,保证和其他模块组合,不在全局信息结构发生变化,快速互换,不用调整其他构成方式

例如:在寄快递填写增值服务费用模块,根据服务产品种类不同,划分不同模块,有快运快递,需要上门接货,需要包装签单返还等区分,在不改变页面信息结构和其他模块情况下,可以实现快速互换,满足不同业务模式的差异需求

品骏达

3.3模块组合

模块划分和模块设计是播种,模块组合则是最后的收获,通过组合快速搭建出核心结构,保证核心用户体验一致性。模块组合不仅是简单将所有模块堆砌在界面上,需要他们各司其职,成为一个整体。需要遵循以下原则。

明确主次:每个页面一个主要功能,解决最迫切的问题,其他模块不影响主要模块的使用;组合使用时要考虑减少不必要模块,或降低其他模块信息强度。
避免冲突:使用多个组件时,需要互相微调,避免信息的重复,交互方式的不一致,逻辑的矛盾等

4.设计工具

参照使用sketch中的组件功能

关于sketch组件使用方法,请参考【如何构建高复用性的交互组件库】

总结

模块化设计是设计师本身在行业中所积累的一种转化。
利用已有的经验,降低设计风险,提升设计效率和质量。
因此再设计和使用模块时需要不断迭代更新,不断对模块进行验证和优化,适应用户需求的变化趋势。

产品初期:设计实例中逐渐摸索,提炼产品可复用的模块,优先满足共性需求
产品中期:样式差异化和多样性增加后,逐渐转向业务特色的精细化发展方向
模块后期:反复运用中,审视设计的合理性,不断更新,对新功能,提炼其通用性,选择性的沉淀为模块。

这篇是我个人针对面试小技巧的思路整理
【UI面试小技巧_用笔写下所思所想(附具体案例)】

我是糕小糕,糕小糕,希望文字的对你有用。
正所谓:书宜杂读,业宜精钻,越努力越幸运

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容