OnePlus 7Pro网站设计
手机详情页设计的标杆之作
概述
OnePlus 7 Pro是一加科技2019年5月16日发布的产品，主打屏幕，业内首次引入高刷屏，为此，我们在设计中充分的体现了屏幕这一卖点。
以下链接是最终上线版本，点击即可体验。
立刻体验OnePlus 7Pro上线效果
<p>我们先看下开场和屏幕这部分。</p><video controls preload="metadata" src="https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/work-gallery/videos/7pro-first.mp4"></video><video controls preload="metadata" src="https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/work-gallery/videos/7pro-first-mobile_1.mp4"></video>
<p>屏幕旋转部分，使用90张静态图组成的序列帧。为了既保证速度，又保证效果，90张序列帧中，中间部分都是压缩的，最后几帧使用了高质量的图。</p><p>为了保证大小，最后又逐帧逐帧的把多余部分黑色裁切，只保留主体部分。</p><video controls preload="metadata" src="https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/work-gallery/videos/OnePlus18821-90_2_1.mp4"></video>
<h3>设计过程</h3>
<p>我们看下设计过程吧，从上至下，从信息输入明确设计目的后，启动情绪版的工作，在到最后的上线。大概过程就是如此。</p>
<img width="1400" height="877" src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/OnePlus7Pro-designprogram.jpg" alt="" loading="lazy" />
<h3>早期的信息输入</h3><p>作为交互设计师，需要得到非常详细的信息，这样我们才能做出更好的设计。这里非常感谢产品运营写出了非常详细的文档。</p><p>后续框架内容的构建均以此为基础。</p><p>多次的信息输入，是为了让后续的步骤更加快速。尽可能多的和产品经理与需求方讨论是帮助无疑巨大。</p><p> </p>
<a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/7pro-infoearly2.jpg"><figure><img src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/7pro-infoearly2.jpg" alt="7pro-infoearly2" /></figure></a><a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/7pro-infoearly1.jpg"><figure><img src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/7pro-infoearly1.jpg" alt="7pro-infoearly1" /></figure></a>
<a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/img-coversation.jpg">
<img width="1400" height="902" src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/img-coversation.jpg" alt="" loading="lazy" /> </a>
<h3>用户录屏与访谈</h3><p>想知道过去的用户是如何访问页面的，比如录屏，热力图，点击图，流量漏斗和浏览效率的分配。PS:更多的用户研究并不是专门为这一次项目进行的，而是持续积累的结果。</p><p>比如我们定期的去见用户，听客服的录音等等，这些都是极好的方式。每次见用户的时候，我会请求其访问一下我们的网站完成指定任务，这个过程中会进行录屏，如下面视频。</p><p>下图是我们在北京和用户进行的活动，图中的妹子是我们的UI设计师。</p><p>我们在访谈中会得到很多信息结结论。</p><p>如什么属性的用户会重点关注哪些，容易忽略哪些，对信息的看法是怎么样的等等。</p><p>这些都是帮助我们决策和设计页面的重要依据。</p><p>信息的来源和决策我们只依赖两个部分：<b>用户和市场目标</b>。一定要警惕拍脑袋的决策和基于领导权威性而非专业性的决策（专家决策很大程度上是极低成本的市场研究和用户研究决策，因为专家本身就有丰富的市场经验和用户经验原则的积累）。</p><p> </p>
<a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/img-coversationwithuser.jpg">
<img width="1440" height="948" src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/img-coversationwithuser.jpg" alt="" loading="lazy" /> </a>
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/userscreen-bg-1.mp4<h3>情绪版和飞机稿</h3><p>设计师开始协作前，我们一定一定要先进行情绪版的工作，建立基本的审美和创意方向，不然后续比较难以开始。</p><p>如下图，强烈的光影、自然、性感的审美倾向。实际上，OnePlus 7系列的专题页就在这个基础上发展过去的。下图你可以看出来，这是一个审美倾向的延伸。</p><p> </p>
<figure><img src="https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/ux%E6%96%B9%E6%B3%95-img/QXB4.jpg" alt="QXB4" /></figure><figure><img src="https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/work-gallery/videos/OnePlus7pro-QXB4.jpg" alt="OnePlus7pro-QXB4" /></figure><figure><img src="https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/work-gallery/videos/OnePlus7pro-draft1.jpg" alt="OnePlus7pro-draft1" /></figure>
<a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/7pro-mood-board-1.jpg">
<img width="1400" height="747" src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/7pro-mood-board-1.jpg" alt="" loading="lazy" /> </a>
<h3>信息构架</h3><p>通读产品介绍文档，和产品运营反复的沟通后，开始进行框架搭建，真的把所有详细卖点都列出来了，除了非常长的概述以外，每个分页面都讲的非常的细。下面展示了整体的内容结构和页面的内容结构。</p><p>内容模型图</p>
<figure><img src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/OnePlus7Pro-Content.jpg" alt="OnePlus7Pro-Content" /></figure>
<h4>页面线框图 Wireframe</h4>为了方便，我将信息结构图(Wireframe)和最终的设计稿摆在一起对比看。 我在做Wireframe的时候，最终文案是没有的，依据一个Excel自己先填着。完成这一步之后，组织评审和一些简单的可用性测试。做完之后，立刻交付给视觉设计师进行设计。
Highlight页面
这是整个页面的首页，整个页面的重心，从后来的数据来看，50%的用户看到了最后。
交互稿比设计稿要更早的产出，等待视觉设计稿完成之后，高保真Demo才能制作。因此，在这完成了交互稿，我们也会一些草图Demo。下图是一个非常飞机稿和一个中等程度的稿。
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-Sketch-demo_1.mp4https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-Sketch-demo_mo.mp4结构内容流程的交互稿比设计稿要更早的产出，交付给视觉设计，视觉设计稿完成之后，高保真Demo才能制作。因此，在这完成了交互稿，我们会和视觉一起做一些草图Demo。
在7Pro的页面设计中，我们的项目会每周进行一次中等范围的过稿评审，设计稿完成一部分高保真也跟随完成一部分。
下面展示了最开始的时候的主画面开场。
KV是老板最为关注的，牛逼的视觉设计师依旧去打磨，我们继续深入做下面的内容，最后将最终KV融合在一起就行。
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-strat-first_1.mp4https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-strat-first-mo_1.mp4最终的设计稿如下图，点击图片查看长图。
最终的完成如下图，进行了大量压缩，大家将就看吧，或者去线上看最终版本。
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-PC-final.mp4https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-PC-final.mp4各子页面转场
各个子页面入场我们都进行了基本的效果设计。并且采用了统一的动画值。如下图所示。虽然包含了很多子页面，但实际上他们都是一个页面，所以转场才会如此的细腻和没有中断。
屏幕
由黑夜到天明的概念设计。
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus-Display-desktop.mp4https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus-Display-Mobile.mp4充电
曲线和文字需要高度匹配。
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-Dashcharge-PC_1.mp4https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7Pro-Dashcharge_2.mp4影音和屏幕
后续其实都没什么特别的，对影音部分和文字出场倒是调整了很久，需要视频内容和背景变亮+文字内容的曲线高度一致，使其具有很强的节奏感。
https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7pro-switchpage-game.mp4https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/videos/OnePlus7pro-switchpage-design.mp4我们用什么工具呢
整个下来，我们花费了2个月时间进行设计，所产生的稿件非常多。各种视频素材的剪辑合成，比如剪辑底部更多导航的底视频，制作了4个版本的KV视频，合成指纹解锁、动态壁纸、截屏素材、游戏、影音的素材等等。
<p>下图是对素材加工的产物，非常多的视频素材。</p>
<a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/OnePlus7pro-file-3.jpg"><figure><img src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/OnePlus7pro-file-3.jpg" alt="OnePlus7pro-file-3" /></figure></a>
<p>那么使用什么工具呢，本来不想提这个，作为成熟的设计师，你应该很清楚效果由什么工具来实现。</p><p>当然了，工具本身其实是设计思路的体系。我们使用Principle制作低保证和最后的高保真Demo，使用AE和PS对素材加工，使用Sketch进行交互稿的制作。下图是屏幕部分制作的Principle工作窗口截图。Dirvers能很好的模拟文件流效果，前端基本就是一模一样的按照高保真Demo来制作。</p>
<a href="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/OnePlus7pro-file-4.jpg">
<img width="1440" height="828" src="https://co-cn-wpjam.oss-cn-shenzhen.aliyuncs.com/img/OnePlus7pro-file-4.jpg" alt="" loading="lazy" /> </a>
<h3>最后的建议</h3>
<p>这篇文章讲了很多，但是细节永远讲不完。有个小细节一定要说下。</p>很容易忽略的一步，是上线前对根文件目录中，素材的压缩检查。
这一步做的好，可以节约下一半的素材大小。这意味着我们加载速度更快，而加载速度意味着更好的体验、更好的转化率与流量效率。
下图展示了highlight部分未检查前，大小为27.4M，检查和压缩后为11.9M，而Camera这张图则有611K调整到了108K。所以，检查目录并压缩图片非常非常重要。一张一张的图压缩后进行比对，差异不大就使用更小的。
