从上世纪80年代的“大哥大”到如今的“智能手机”，短短三十多年间手机的功能越来越丰富，使用场景也得到了大大的扩展，无论是听音乐还是拍照，哪怕是把美颜照片分享到社交网络都已经是习以为常的事情，而当年的“手机”除了打电话也就只能接电话了。
图via：dailyinfographic，Author：Alonzo
今天，越来越多的公司加入到了手机的设计研发当中，手机代际更迭的速度更快过了人们更换的需要，面对不断推陈出新的设计和功能，消费者的眼光也变得越来越苛刻，于是对于如何更好的去推广和展示自己的产品，就成了一家公司不能回避的问题。
相较于海报的局限性和发布会的废话连篇，甚至于第三方评测机构所谓客观的主观，手机官网的产品展示页面反而成了一家公司能够相对客观性的对产品完整充分展现的途径之一，而通过一家公司对待自己官网的态度，也旁证了这家公司是如何看待产品设计和用户体验乃至于情怀的……这些综合指标已经变相的成为消费者是否购买一个产品的考量标准。
老罗在锤子手机发布会上
随着行业领头的苹果产品 iPhone 7 的发布，各大厂商也纷纷祭出了自己的旗舰机型，又一波换机潮开始席卷我们的日渐消瘦的钱包。同时，各大厂商针对自己的产品也更新了自己的产品官网。借着这个机会，我们今天就以此为题展开来说说各大公司手机产品展示页面的设计。
导航栏
1994年第一款智能手机 IBM Simon 发布，那时候还没摆脱大哥大的造型，但配备了一个触控屏，可以通过触控笔进行操作，同时内置了行事历、通讯录、世界时钟、计算器、记事本、电子邮件、游戏等应用程序，但现在的手机把 logo 去掉的话看着都像是一个模具刻出来的。
IBM Simon 和充电基座
在这种趋同化的大环境下，手机厂商们在下大功夫搞产品研发的同时也在寻找痛点来创造卖点，在确定手机的定位和目标人群、文案定稿的情况下（当然这是最理想情况）便开始进行页面制作了。
通过对主流手机品牌的介绍页面观察，大部分都会将导航栏固定在页面上方，便于在不同介绍信息之间跳转，部分导航栏上也添加了购买按钮，在介绍信息刺激观看者的时候便于其直接进行购买。
导航栏对比
有些导航栏并不是完全固定，在观看者顺序浏览时会隐藏，回滚时才会显示，比如魅族的 PRO 6 介绍页面。
魅族 PRO 6
除去这点不同之外，基本上所有手机产品都会以大幅图片进行展示，以此来制造良好的视觉效果。
排版方式
既然有图那就少不了文字的搭配，目前的手机展示页面有以下三种排版方式：
・居中式 顾名思义，居中式就是将文字和图片居中对齐的方式进行图文排版，这种方式可以保持视线垂直的进行浏览。
iPhone 7
・左右交错式 这种方式是将图片和文字相互错开放置，打破了居中式排版的严谨，给图片更多的展示空间，让整个版面富有张力。
微软 Lumia 950
・混合式 混合式是目前应用较多的排版方式，这种方式将居中式和左右交错式结合在一起，更利于图片的细节展示。
华为 P9
浏览方式
目前有两种主流的浏览方式：直线式和幻灯片式。
・直线式 直线式即将该条目下的信息以线性的方式陈列，每个信息区域之间的过渡观看者只需向下滚动浏览即可。
三星 Note 7
・幻灯片式 这种方式其实类似于直线式，但在每个信息区域的切换过程中会有一定的延迟，让当前的信息区域保持相对独立，减少其他信息区域的干扰。
小米 5
微动效的运用
最值得一提的就是微动效的运用了。
文字的淡入
使用时的细节展示
切换幻灯片时的一驰一松
这些微动效增强了网页的体验效果，也能对观看者进行有效的引导。
就拿苹果的网页来说，在 iPhone 介绍页中滚动时，标题与 iPhone 产品图异步滚动；
标题与 iPhone 产品图异步滚动
iPhone 信息区域的详情页展开后网页居中，退出详情的气泡会跟居页面的滚动位置，悬停在页面顶部，让你随时可以跳出当前详情；
滚动时，手机的光源会根据页面的滚动而折射；
这些细节对于整个网页的浏览体验来说是至关重要的，如果没有这些细节，看着那些呆板的图像和文字会是多么无聊的一件事。
其实除了这些还有你想不到的手机展示页面设计：
在这个网页中手机做为主体在不同使用场景切换并贯穿始终，创意十足。
看到这些相信大家对手机页面设计有了一定的了解网页居中，其实做为宣传渠道之一，最终还是要服务于产品本身，只有抓住产品特征，用恰当的方式表达出来才是最合适
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击网站首页每天更新
站 长 微 信： aiwo51889
