UI设计-移动端板块分割的细节

在ui设计中功能板块的区分有很多种方案,总结下来无非就是线面区分法。

我们先说说线的用法

一、线分两种一种是贯穿线另一种是短线。

贯穿线:用于相同把内容的不同板块。

短线:用于区分相同板块的不同内容。

短线的用法
贯穿线的用法

主要在在详情页面和结算页面处理较多文字和内容信息的时候会用到。使用的技巧就是分析这个板块是否是形同的信息模块。从可读性出发,将信息页面的节奏化分割,结合使用再加上通过板块的留白加强易用性的提升。


微信-我的页面通过短线和贯穿线来调整页面分割

当然在处理页面的时候会根据产品实际功能不同来进行调整,(短线和贯穿线的用法可以调整为短信和面的结合,我们看一下案例),特别是是一些用户年轻化的产品,在功能呢板块的区分上基本用面来区分大的功能板块,加入短线和留白来做细化分割。

淘宝-我的页面通过面线结合的方式做区分

当然说是不用线来处理区分板块纯用面区分可不可以,当然也是可以的。这样的优势的这个界面功能明显,但是劣势在于不能一次性给予用户很多的功能选择,怎么理解呢?综合类电商,需要很多入口和不同的功能呢的时候,一定优先考虑线面结合的形式。但是如果产品本身功能很简单没有那么多板块的情况下,是可以放弃掉线性分割,转而直接使用多面分割。通过面积来完成页面层次的划分。举例

自如APP-首页面性区分
每日优先-首页面性区分

接下来我们谈一下线面在实际设计作业的时候要注意什么?

第一线和面的颜色是不一样的,对!是不一样的。

这是刚刚的微信-我的界面

你留心看一下。板块间区分用的灰色面的颜色是略深于线的,这里有一个经验性数值,面颜色色值在E中选取灰色,而线的选取是在F中选取色值(不是绝对,常规操作)。这里还有一个细节中的细节,就是灰色的倾向问题,微信等现在成熟的产品你看一下灰色分割都不是一个纯的灰色,是有一定颜色趋向的,微信你仔细看是“蓝灰色”,这样做的目的就是大面使用的时候视觉会更舒服,不会因为只是纯灰导致视觉疲劳。

线的选择性颜色
面的灰色颜色以及倾向调整

在设计作业中如何判断?

分割层级是

短线<贯穿线<面

面的分割性最强,所以用于不同板块的区分,但是这里要注意。

以常规750x1334的界面为例,同一屏内不要超过三个面性分割(常规操作)。原因有两个

第一:分割太多会直接导致产品层级很难控制。

第二:太多的灰色会让整体颜色乱掉,导致画面发脏。

以上就是本人在设计作业中总结的移动端板块区分的线面使用注意事项,希望能帮助你解决日常工作中的一些问题。

在设计时的汪洋中,我断不敢说自己是什么专家,如有不妥欢迎积极交流。留言私信均可,欢迎指正,谢谢!

祝大家一稿全过~再见~~

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

推荐阅读更多精彩内容

  • 目的:UI设计的目的是为了更好服务用户;能让用户快速完成自己的目标; UI设计的发展趋势:全链路和复合化的设计人才...
    quantre阅读 11,022评论 9 83
  • 我的老妈很新潮,我们都管她叫潮妈。 前两天她打电话给我,说她在手机上秒杀到了一元钱的雨伞。隔着手机屏幕,我都能感受...
    冰蓝jiejie阅读 1,464评论 5 3
  • 10点已经躺在我不算大的床上了,没事翻了波知乎。吃了几碗狗粮,我心甚慰,甚慰。 狗吃屎,狼吃肉的言论已经看了n+1...
    不要慈悲阅读 1,227评论 0 0
  • 20:48分,电话响起。彼时,一个人静静地坐在悦读书馆里面,一首班得瑞的月光仙境、一杯清茶,伴着眼睛里一阵一阵的疼...
    梦1212阅读 268评论 0 2
  • 如果说 安全感有十分 那么 我从张鑫朝 那得到的 只有十分之一 以至于 我看到 原来惦记他的人 跟他 同框 还是觉...
    四月里啊阅读 624评论 0 0