界面不耐看不精致?学会高手的「模块化整合」快速进阶!<

时间:2020-08-29 10:35:39 来源:

【摘要】 考必过小编为大家整理了关于界面不耐看不精致?学会高手的「模块化整合」快速进阶!<的信息,希望可以帮助到大家,下面我们就一起来看下界面不耐看不精致?学会高手的「模块化整合」快速进阶!<的具体内容吧!

界面不耐看不精致?学会高手的「模块化整合」快速进阶!

最近,看《我的家里空无一物》被种草,开始学习收纳。在看收纳书时,发现收纳思维和 UI 设计布局很类似。那我们今天用收纳思维说说怎么做 UI 模块化整合。

为什么要谈模块整合?

一张原型页面上有各种各样的信息元素。模块化整合,就是在现有的元素中,提取共性,分门别类,再排好。从阅读的角度来看,让相似内容聚集、易找;从视觉感知角度来看,让页面元素不散,耐看。所以,不光是交互上,还是视觉上,让页面信息有模块感,是 UI 高手进阶过程中的一个必备技能。

用收纳思维做UI模块整合

收纳的本质是把现有的东西分门别类进行整理,让居住空间舒适、美观、不杂乱。

由《速战速决的快乐收纳术》 [日]饭田久惠,收纳 5 步法获得灵感,提炼出以下「UI模块整合思路」流程。

1. 认识 – 对原型内容有认知

拿到原型,我们需要弄清楚每一个元素存在的目的意图,并与需求方明确以下要点:

信息层级 沟通确认此页面,最重要、次要的信息,依次类推。便于整合模块信息过程中兼顾视觉表达。

文字信息和字符最大长度,每个文字信息的最大长度是?什么文字可以省略,什么不能?如果没有明确,可以根据视觉显示效果再具体给到需求方建议。

按钮,明确是否有引导点击转化的需求,按钮强调的强弱等。

页面预期,部分原型提供者会对页面有自己的构想和预期。思考是否可以执行,成本大小。如果不可以,需要提前沟通并和对方达成一致的认知。(tips:用参考图例来沟通,避免语言造成的理解不一致情况)

2. 整理 – 核对斟酌每一个元素的必要性,归纳、合并;

不是每一个原型的完成,都是成熟且不可辩驳的。「学会质疑」,我们可以结合改版目的,开始独立思考。其实设计师很容易把自己转化成用户小白的角度看待问题。用以下 3 点来思考整理页面信息与元素:

认识斟酌,核对每一个元素的必要性,如果没有必要,那么借用知识点佐证自己想法与需求方提出建议并讨论;

归纳分类,全局审视,把同类别的东西,归纳整理为一个整体;

层级思考,部分按钮、入口或者模块,要注意是否有从属关系、层级关系;

3. 构思 – 快速构建可能性的结构与布局

完成前期准备工作后,就要开动小脑筋啦!根据以上 2 步得到的要点,用笔在纸上绘制可行性方案,手稿可以快速直观的了解页面结构与布局、信息展示位置、交互元素等。

在构思布局过程中,还需要考虑 UI 延展性问题。如果下个版本增加字段或者功能,UI 布局要大改,这样的布局方案最好再重新思考。

4. 执行 – 采用可行性方案兼顾思考视觉表达

审视绘制的所有方案,然后选出 1 到 2 个可行性方案,开始执行。在输出高保真交互原型过程中,需要兼顾思考视觉的表达形式,按钮是用线框?用填充?卡片用投影?还是用底色?这样的布局,如果多颜色使用,画面是否会乱?等一系列的思考,选择最合适的一个方案来输出。

5. 复盘 – 检查输出物是否与需求点契合

有的时候,路径长了,时间久了,会偏离初心。阶段性的回顾与自我思辨,才能让设计输出物更贴合需求目的。

整个设计完成后,总结与回顾,也很必须。优秀的模块设计可以提炼出可复用性样式,方便 APP 全局一致化处理。不好的地方则改之,不断修正以至切合需求目的。

总结

纵观优秀的平面设计、UI 设计,模块感的整合都是必不可少的存在。它让信息更易读,也让视觉更美观。你学到了吗?

以上就是考必过小编为大家整理的关于界面不耐看不精致?学会高手的「模块化整合」快速进阶!<的相关信息,想了解更多考试最新资讯可以关注考必过。

"> 上一篇      下一篇
技能类相关推荐 更多>>
饿了么、美团都在用的轻拟物风格,到底是什么?<i class 从零开始设计产品的 10 个 UI/UX 启示 如何做好UI界面的表单设计?收下这篇科普干货!(下)<i 为什么你的设计总是同质化? 如何让你的图标提升一个档次?从这 3 个细节改起<i cl 从饿了么超级会员改版,聊聊背后的产品设计<i class="i 高手出品!2020~2021年UI界面设计趋势 设计师必知的20个幻灯片实用设计技巧
技能类热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net