移动端《设计一个美梦》—有关百度锁屏的故事--九分网络

九分网络

接到这个锁屏设计项目的时候，我们开始考虑着如何把一款锁屏应用做得更有趣更不一样。目前已有的锁屏应用大多数是围绕于变换各种滑屏解锁的视觉表现形式而展开设计，而这一次我们希望在锁屏中添加一些新鲜有趣的东西，在锁屏的基础上，还能传递更多的信息，用户在每一次使用时都能有不一样的内容。当“锁屏”与“搜索”这两件事发生碰撞时，我们开始寻找一种解决方案，让屏幕解锁与网络热词之间产生关联。就这样，我们定义了“百度锁屏”，它不仅仅是锁屏，还能够查看并搜索网络热词;同时，它还应该是漂亮的、兼顾趣味和效率、能够传递情感的一款锁屏应用。 copyright 9fen.net

　　星空概念的诞生

前期的头脑风暴阶段，我们产生了很多关于热词解锁的想法，综合评估创意的可行性，筛选了一部分方案，并选取以下几个维度对方案进行考量：简洁，有趣，高效，易扩展，传递情感的; copyright 9fen.net

九分网络

　　(图1：前期概念发散) copyright 9fen.net

内容采集来自9fen.net

　　(图2：方案评估)

www.9fen.net

九分网络

　　(图3：概念拓展尝试) www.9fen.net

经过创意筛选和草图筛选，我们开始对一部分创意草图进行设计拓展尝试，在这个阶段，包含了对视觉风格、基本操作流程和动效展现等细节的考虑。在设计初稿方案中，我们最终选取将热词与星辰星座相结合的设计概念。 内容采集来自9fen.net

　　演绎创意蓝图 内容采集来自9fen.net

　　1)设计概念的延伸： 内容采集来自9fen.net

创意概念确定之后，深入拓展和演绎阶段变得更加有意思起来。以每一个热词为一颗星，每组热词就构建出一组星座图案;星座图案的多样，也让热词的排布也有了更多可能。

本文来自九分网络

沿着这个概念再向前走一步，星座延展到星空，热词更迭，斗转星移，星空与星座，以一种既有趣又富有情感的方式，呈现了热词内容。

本文来自九分网络

九分网络

　　2)两种解锁行为：

在热词解锁方式上，我们为用户提供了两种解锁途径：划词解锁和两次点击解锁;

copyright 9fen.net

划词解锁：让用户在划动热词解锁的同时，能够对热词发起搜索;而星座图案的变化和星辰列队排布的动效，也为解锁操作带来了乐趣体验。

内容采集来自9fen.net

　　(图5：解锁方式-划词解锁) www.9fen.net

　点击解锁：对热词两次点击热词进行解锁，同时对热词发起搜索。看到屏幕上的热词，用户下意识的反应是点击，一次点击锁定热词，再次点击解锁并发起搜索。这种方式简单有效，更符合用户的认知习惯。 copyright 9fen.net

　　(图6：解锁方式-点击解锁) 内容采集来自9fen.net

　　3)好玩VS 效率 本文来自九分网络

为了让星空更丰富有趣，我们设计展现10套不同的星座图案。同时，我们对每组热词的解锁采用一套反馈呈现动效(星辰列队排布)，保证用户操作行为的一致，降低用户操作成本，在好玩的同时兼顾了使用效率。

　　(图7：统一反馈动效，降低操作成本)

内容采集来自9fen.net

　　4)可拓展性&适应性 本文来自九分网络

这里提到的可拓展性与适应性主要体现在两个维度上：一方面，不断更新的热词词条字数不一，在每一组热词在屏幕中排布的位置和策略需要考虑可能出现的极端情况。另一方面，对于在安卓系统上的设计，考虑在不同屏幕尺寸下整体的排版呈现效果。 copyright 9fen.net

copyright 9fen.net

　　(图8：热词的显示策略) copyright 9fen.net

　　5)更多主题，更多风景

内容采集来自9fen.net

继续延续星空的概念，或是夜晚的流星，或是极光的神秘，或是节日的缤纷……通过更换主题壁纸，我们也向用户展示了更多美丽的天空风景。 copyright 9fen.net

标签： 交互设计 百度 视觉设计

郑重声明：本文版权归原作者所有，九分网络转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

九分网络专业提供公众号、小程序、PC及移动端站点搭建！网站程序及服务器维护:13106499520。微信:452570709