10

大厂案例实战!百度小说如何打造人文感设计?

 1 year ago
source link: https://www.uisdc.com/baidu-novel-design
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
大厂案例实战!百度小说如何打造人文感设计?

本文阐述了百度小说设计团队如何基于人文感设计理念,打造直观易用的产品体验,从而提升产品竞争力和用户满意度。

更多百度设计方法:

百度小说是百度 APP 内最核心的垂类业务之一,作为一款平台型产品,百度小说设计团队一直以用户体验为核心关注点。为了保持产品的市场竞争力,百度小说团队近期进行了一次设计改版。本次改版旨在提升产品的功能性、美观性和易用性,以满足用户日益增长的优质体验需求和市场的快速变化。

鉴于此次设计改版背景,小说设计团队提出了人文感的设计理念,贯穿在本次改版的内容中。

一、什么是人文感设计?

人文感设计,是立足用户需求和情感,贴近用户期待的体验设计,我们以用户为核心,深入了解用户的喜好、行为习惯和需求,从而设计出贴心、直观、易用、愉悦的产品。

大厂案例实战!百度小说如何打造人文感设计?

百度小说的产品核心是由书籍组成的,阅读让千万级用户汇集在此,而千万级的用户正是由每一个独立的“人”组成。因此,“人”的需求就是我们在设计中尤为关注的。小说设计团队从“人”的需求、“人”的情感和“人”的文化三个维度,深入地思考如何将阅读与用户的需求完美地结合起来。

宋朝诗人汪洙在《神童诗》中有这样的千古名句:“万般皆下品,唯有读书高。”读书自古以来是成为高雅风韵的文人士大夫的必经之路。由此可见,自古以来读书和雅致之间就结下了不解之缘,阅读与国风雅颂的风格也就找到了完美的交汇点,因此小说设计团队在确定设计风格的探寻中,选择了国风的风格来体现百度小说的人文感的设计。

大厂案例实战!百度小说如何打造人文感设计?

二、构建小说的人文感的视觉新风格

人文感设计语言融合了简约、舒适、自在的设计体验,让人能够轻松沉浸其中,并感受到独特的国风韵味和情感内涵。小说设计团队从“色、字、构、画”四个维度进行拆解。

大厂案例实战!百度小说如何打造人文感设计?

1. 色—清新淡雅的色彩

牛皮纸卷通常是手工制作的,它会给人一种温暖的感受。设计团队通过提炼牛皮纸卷的色彩,衍生出萱草橙作为主色调,传递出阅读朴实和亲切的寓意。

大厂案例实战!百度小说如何打造人文感设计?

在辅助色上提取上,通过参考古代艺术品,并结合现代审美,提炼出凤仙粉,葵扇黄、姚黄绿、晴山青等古典色彩,确保辅助色与主色相融合,形成一套和谐的色彩组合。

大厂案例实战!百度小说如何打造人文感设计?

2. 字—规范文字使用规则

基于国风意韵感,设计团队在文字的使用上,也选择了一套衬线体字体,该字体字形瘦长,柔美清透且识别度高。在界面中,主要在标题区应用这套字体,将其中的一笔进行跳色点缀,不仅让用户阅读舒适,而且提升百度小说的品牌识别度。

大厂案例实战!百度小说如何打造人文感设计?

3. 构—构建秩序感的页面

在页面结构上将页面容器的边距进行了优化调整,使构图更加饱满,封面是页面上最引人注目的元素之一,通过调整封面的尺寸可以使其更加突出。采用了更大的封面尺寸,使画面内容更加饱满,将大圆角优化为更小的圆角,视觉上更加精致和细腻。

大厂案例实战!百度小说如何打造人文感设计?

为了让用户第一时间就能够看到自己感兴趣的标题内容,在内容展示上,我们针对重点的信息进行了强化。将主次信息,从色彩到字重上进行了优化。新版的设计采用加粗的标题文字和浅灰色的辅助信息,拉开对比,强化重点,让用户更快找到自己感兴趣的内容。

大厂案例实战!百度小说如何打造人文感设计?

在页面细节元素设计上,将角标样式优化为右侧的书签的样式,整体感受更像现实生活中的书签。在辅助标签的设计上,将纯文字样式优化为右侧这种多彩面型的样式,强化内容的丰富和多元。

大厂案例实战!百度小说如何打造人文感设计?

4. 画—打造国风特色的插画风格

图形的设计是最容易识别和产生共鸣的。在插画元素的提炼上,为了能够与小说网文氛围结合的更紧密,我们以小说类型为划分维度得出了一系列的具象的联想关键词。

大厂案例实战!百度小说如何打造人文感设计?

例如,女生的插画图形,首先划分为偏向言情类型,由此联想到一只小鸟站在桃花上,整体采用粉色调的场景进行展现,梦幻而唯美。男生的插画图形则偏向玄幻类型,从而联想到葫芦,由此绘制出葫芦和浮云结合的画面,自由而飘逸。

同时,插画的设计采用简约的几何图形,画面强调诗意和美感。

大厂案例实战!百度小说如何打造人文感设计?
大厂案例实战!百度小说如何打造人文感设计?

在话题落地页等沉浸感的场景下,也融合了插画元素作为装饰,用户在当前的场景能够有更强的沉浸感和共鸣感。

大厂案例实战!百度小说如何打造人文感设计?

三、人性化产品体验

以人为本的设计理念不仅仅是视觉层面的展现,还需要从用户需求维度提供人性化的产品体验,因此,我们提炼出了四组设计手段:更贴心、更高效、更热闹、更满足。

大厂案例实战!百度小说如何打造人文感设计?

1. 更贴心—贴心的设计让用户体会到关怀和舒适的享受

以人为本的设计能够更贴心地满足用户的需求和期望,通过关注用户的喜好、行为和习惯,让用户体会到关怀和舒适的享受。因此,针对于不同的用户行为进行了精细化的设计。对于未登录、书架为空的用户,我们默认为用户锚定到精选的 tab,而针对本地书、网页书的用户,我们为其定位到书架的 tab,方便用户更精准的切入场景。

大厂案例实战!百度小说如何打造人文感设计?

同时,我们在精选的头部增加了运营区,针对于无历史记录的用户,为其推荐优质的内容,提高用户的找书效率。而对于有历史记录的用户,外露上一次阅读的书籍,方便用户更快捷的进行续读。

大厂案例实战!百度小说如何打造人文感设计?

2. 更高效—高效的设计能让用户体验更便捷,决策更精准

只有贴心的服务是远远不够的,以人为本的设计还需要为用户打造更高效的设计体验,我们通过简化设计流程,智能化推荐等手段,让用户体验更便捷,决策更精准在各类场景新增书籍标签模块,提升用户筛选书籍的精准度,使得用户在各类场景下找书更高效。

大厂案例实战!百度小说如何打造人文感设计?

在推荐形式上,我们也采用了多样化的推荐方式。例如在首页增加了 feed 流形态的信息模块,以更直观的图文展现方式,帮助用户发现他感兴趣的内容。在书架场景,针对于书架内容少的用户,自动的放置两本高流量书籍,帮助用户高效的触达内容。与此同时,我们还会根据用户行为数据,采用弹窗形式和章尾推荐等形式主动向用户推荐与其喜好度高的内容,方便用户高效的触达他感兴趣的内容。

大厂案例实战!百度小说如何打造人文感设计?

3. 更热闹—热闹的设计能给用户带来活力和趣味的体验

以人为本的设计应该是有人气儿的,为了增强互动氛围,我们搭建了书友社区,为用户提供求书、荐书的功能,书友热聊落地页头部在设计上采用了弹幕的形式;话题模块的设计采用双列流的交互形式,给页面增加动态感和活跃感。通过打造热闹的氛围,既能为用户带来更具活力和趣味的体验,同时提升了用户的互动活跃度。

大厂案例实战!百度小说如何打造人文感设计?

阅读器场景是用户使用时长最长的一个场景。因此我们为用户提供了段评功能,方便用户阅读过程中和书友进行交流,为了不影响阅读的流畅性,我们采用弱化的段评图标样式和色彩,段评入口设计在段落尾部,减少对阅读的干扰。

4. 更满足—满足的设计能够让用户获得成就和收益

以人为本的设计能够让用户在产品中获得成就和满足感,从而形成愉悦的产品体验。为了让用户能够获得满足的感受,我们将旧版的签到系统升级为金币激励体系,采用做任务赚金币的形式,增加用户的成就感。

整体的设计风格也延续了国风意境感。首页顶部采用招财树的图形设计,强化福利感知。领取金币场景通过获得金币的动效,让用户产生满足感。

同时,我们对用产品内的用户进行了分层设计,针对新用户增加了七天限时福利活动,让新用户感受到平台的福利,从而愿意留下来继续体验。

在阅读器场景,我们增加了章尾和半层金币领取提示,即时提醒用户领取福利,同时,强化领取成功样式,增强用户的获得感。

在运营活动的设计上,延续国风意境的设计风格,我们将九宫格的抽奖活动入口前置在福利中心的首页,方便用户快捷的参与抽奖,获得收益。爆更一夏,看小说瓜分金币活动,整体是采用古典荷塘的景色,让用户在参与赚钱的过程中感受到清爽夏日的氛围,通过多样化的运营活动丰富用户获取收益的方式,增强满足感。

百度小说设计团队坚持以用户为中心,秉承人性化、情感化设计和文化传承性的设计理念,让用户感受到独特的情感连接,融入文化元素,传承历史与情感,最终形成百度小说的人文感设计。

20230810-uisdcbanner-aigckecheng-bottom.jpg
收藏 19
点赞 40

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。


Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK