手机二维码 手机二维码

UI设计中的布局排版

发表时间:2021-08-27    人气:2327    作者:牛耳教育
    说到结构,我们一般都会联想到用户体验五要素中的结构层,他在产品设计中更多体现于信息布局和内容结构布局,而对于我们UI设计师来说,更多的感觉就好像画面中的布局与排版。

    结构的内容相对来说还是比较广泛的,我主要是围绕界面布局来进行分析,讲一些我觉得还不错的优秀案例,希望从这几个角度出发,可以带给大家一些启发。
UI设计中的布局排版
    1、场景化体验UI设计

    场景化设计是体验设计中较好的发力点,也是我近期一直在研究的方向,后续有空我会单独写一篇文章再进行深入分析。总的来说呢,场景化设计分为多个侧重点,今天分享的内容主要围绕着用户分层,为不同的用户设计。

    用户需求

    像我们常见的一些首页布局中,其实有也简单的分层,我们可以根据用户不同的目的来进行布局拆分。

    下面的案例从上到下依次为,目的明确的搜索用户、分类明确的用户以及只想随便看看的用户,这样的话,可以有效的服务与不同用户的目的,也可以快速实现流量分发的作用。

    用户行为

    而这两个界面都属于功能服务类界面,用户去完成某件事的行为也可能会存在差异,所以我们也可以对于功能进行合适的分层布局。

    下面的案例从上倒下依次为,想快速申请贷款或者快速完成任务获取现金的用户,我们提供了直接操作区域,并且置于头部进行业务属性强化,中间融入了更多的分类与内容引导,进一步激发用户的兴趣,还可以再通过不同的形式适当的减少用户顾虑,例如优惠券的福利(强化申请贷款),为新用户提供发帖示例(确保社区的内容品质)

    虽然两个界面的内容差异较大,但是结构拆分的方式以及目的都是大同小异的,主要还是为了满足不同行为的用户,进一步辅助他们完成功能服务。
UI设计中的布局排版
    用户身份

    而关于用户分层的场景设计中,我们还可以区分用户不同的状态/身份来对界面进行差异化布局,下面的案例来自于百度网盘会员界面。

    我们都了解会员他分为很多不同的阶段,而不同阶段的用户,对于内容的关注上也存在很大的差异的,我们可以从这个角度出发,区分用户的会员状态,进一步来进行差异化UI设计。从而有效的提高不同阶段用户的行为决策。

    2、拓展卡片

    论出色的界面布局结构,那滴滴的xpanel必定让人印象深刻,它是一个将卡片附着于第一信息架构层级上,内容上分为“消息卡片”“主体卡片”“拓展卡片”三个维度,通过这种方式将一屏内抢占的空间通过简易的交互模式补偿回来了,这样既不打破用户的核心体验,同时又增强了运营、功能的玩法与拓展。

    所以我们会发现在大部分的打车、导航产品中,均会采用这样的结构布局,这也是对特定场景垂直领域的深耕和挖掘,寻找“接触点”,帮助获取更多的功能、内容、服务,实现业务的“有效增长”。

    而对于一个UI设计点,在历经了一段时间的发展后,也演变出了一系列的其他内容,我从这个点深入出发,围绕着内容和布局进行延展。
UI设计中的布局排版
    3、内容·信息流

    众所周知,产品和运营都希望我们能在有限的空间中去展示更多的信息,并且有效的给其他功能进行导流,因此我们可以根据长尾效应,在无限长的信息流当中,利用不同的卡片布局,给予不同的活动、功能进行导流。

    4、布局·半模态卡片

    上面所说到的xpanel,是将卡片附着与信息之上,跟着这个思路发展,我们便产生了下图所示中的半模态卡片布局,虽然追波之前出现一大批叠上叠上叠中叠的布局,但通过线上的实际使用发现,叠一层才是比较合理的方式,而这种布局有着良好的空间收纳能力与信息拓展能力。

免责声明:1、文章部分图片源于网络,均为示意图;2、所有文章、图片、音频视频文件等资料版权归版权所有人所有;3、因非原创文章及图片等内容无法一一和版权者联系,如原作者或编辑认为作品不宜上网供浏览,或不应无偿使用,请及时通知我们,以迅速采取适当措施,避免给双方造成不必要的经济损失;4、本页面内容如无意中侵犯了媒体或个人的知识产权,请来电告之,我们将于24小时内删除。

每日前50名预约咨询

可免费获取专属优惠

*
*

电话咨询

400-0731-162

在线咨询

返回顶部