百度搜索UWP1.0设计思考

年前参与了手机百度为微软做的一款适用于PC，Tablet和Phone的应用设计，最近项目也上线了，善于总结思考的我一笔之下写下了这篇文章———百度搜索UWP1.0设计思考。

什么是UWP？

Win 10是微软新推出的系统，UWP概念则是在Win 10之上，与Win10应用不同的是它能用同一套代码运行在不同终端如PC，Phone，Xbox，HoloLens等上，UWP是一个非常酷炫的概念！

那么问题来了，身为一名设计师，难道我们要为每个终端做不同设计吗…这样心好累的...即使同一套代码RD写布局时心会更累吧…

这时候我们认真研究了一下UWP设计规范，原来UWP是支持响应式设计的，就是说尽可能用一套设计去适应不同终端，而且它也与微软之前提出的Metro风格产生了巨大的差异：Metro设计是微软为了抗衡Android，iOS两平台而推出独有的设计规范，而UWP设计是为了与Android，iOS接近求存的设计规范，设计规范颗粒度越大越容易兼容不同端的设计。

不是说UWP设计规范跟iOS和Android相近我们就把iOS端和Android端手百的交互框架直接移植过来的，而且这套交互框架是通过长时间沉淀下来的，很难在新平台上一下子移植过来（因为需要考虑开发量）所以我们希望能在UWP做出花样来。

好歹这是一篇设计思考…不讲些案例好像对不起你们…以下文笔变得好严肃谢谢。

一个简单输入框的设计

我们根据微软UWP设计规范对输入框进行设计，借鉴了Edge输入框在移动端时放在下面，在PC和平板端则放在上面的形式（这里的输入框更强调是一个命令，移动端放在下面考虑的是用户手指的点击区域，PC端放在上面是为了延续用户在PC上使用浏览器时输入时都会望着上面的习惯）但不同的是百度搜索框是一个品牌的象征，如果首页上放在底部或上部会大大弱化了百度品牌，所以我们在首页更多将输入框当成一个内容而不是命令，当发生输入行为时则会进入到新的界面，这样我们既保留了百度的品牌也遵循了微软UWP的设计规范。

如果认为输入框直接调用系统控件就行那就大错特错了。如果是的话就不会出现以下文字了或这篇文章了...

1.输入框最最最起码有两种状态，未激活态与激活态；由于这次版本没有多窗口功能，网页title很自然地考虑到放在未激活状态下的输入框里，但我们考虑得更深入是用户激活输入框时，更多需要的是网页title还是网址？用户希望能复制网址的需求比对title进行操作更多一些，所以我们将激活状态下的输入框里的内容改变为网址，点击输入框时网址默认被全选，方便用户直接进行复制网址。

2.为了区分网页title和搜索词（要考虑百度的品牌性），我们考虑在文本前加入百度的小熊掌和网页icon来区分搜索词和网页title。

3.如果按照系统默认输入框来开发的话，由于输入时会提示搜索关键词，选择关键词后焦点会离开输入框（变成未激活态），这样用户的输入行为直接被打断了，用户在PC上需要重新将鼠标移至输入框，点击，然后变成全选状态，再点击，才能继续输入文字，如果用户在全选状态下输入文字，之前输入的文字直接没有了，用户又需要重新输入，这样的体验是绝对不能接受的，手机上同理，所以我们需要RD对输入框进行继承并重写代码，使用户在选择搜索推荐词时输入焦点不消失，这样才能不打断用户的输入行为。

4.在PC端输入时双手都在键盘上，所以我们尽可能让用户在键盘上完成所有操作并发起搜索，例如能按下上下键去选择历史记录或搜索推荐词，这样就不需要用户在鼠标和键盘间来回切换操作，体验也会有所提升。

5.在PC上用户发起搜索都是靠回车键，在手机上就不一定了，有些用户可能会想不到按回车键发起搜索，所以我们在手机端上输入框旁边加入了搜索按钮方便用户发起搜索。

6.由于小编是百度无障碍体验设计小组的志愿者，所以这次设计也严格遵守了无障碍规范的设计，可以使用TAB来进行功能切换。

理想很丰满但现实很残酷...由于技术成本和系统原因，目前区分网页title和搜索词与选择搜索推荐词时软键盘默认关闭这会影响用户的输入行为这两个问题仍未解决，希望后面能有解决办法吧...

其他细节请下载百度搜索UWP版查看吧🙄🙄🙄

反思与学习

一个从0到1的项目对我来说是一个很不错的锻炼机会，以下是我这次设计的一些心得：

1.多注重细节，细节决定一切，以上说过的就不再说了...

2.学会聆听。这里还有个设计细节：当我在做皮肤中心界面时希望做成全屏的，因为感觉这样能尽可能把皮肤外露出来浏览效率会更高，但另外一名交互却觉得应该半屏展示，我觉得这样需要滚屏才能把所有皮肤看完相当不方便。最后我们听取了其他设计师的看法，她觉得半屏会更好因为能变选变看到皮肤的变化，这是我之前没考虑到的而且我觉得这的确是一个很赞的点子啊，所以我后来把换肤中心做成半屏模式。自己的观点不一定是对的，有时候需要多听取别人的意见并综合考虑问题。

3.好的用户体验设计能力就是考验你的综合能力。在做输入框功能时RD说有个功能做不了（估计是当时太累没想到解决办法），由于自身有开发背景所以和他探讨多个实现方案后得到了解决方案，这功能最后顺利实现了。如果我们不多考虑实现方案，有些时候可能因为某些原因而使用户体验折损。

4.学无止境。懂多点是非常有好处的！balabala。

小编目前是一名就职于百度的交互设计师；每周会更新一篇基于研究日本餐饮业的服务设计文章或者交互设计文章，如果你感兴趣可以关注小编的公众号查看更多；当然能分享给你的好友就更赞了哈哈哈。