朋友网手机客户端下载页面的设计分享(图文)

2024-08-30 08:34:40

字体：大中小

来源：转载

供稿：网友

　　先让我们来看看一些简单的数据：
朋友网手机客户端下载页面设计分享三联教程

　　据谷歌发布的报告显示，
　　① 97%的中国城市已拥有手机，其中35%拥有智能手机;
　　② 在电视与智能手机两者之间，50%的受访者表示宁愿放弃电视而非智能手机;
　　③ 中国城市智能手机用户随时随地都在使用智能手机，其中家里(66%)，旅途中(59%)，乘坐交通工具中(52%)，餐厅(38%)及商场(30%)是使用智能手机最频繁的地方;
　　(数据来源《中国城市智能手机数据调查报告》;http://www.dianru.com/news-56)
　　可预知在未来的互联网领域，移动端的平台构建会逐渐成为互联网企业的发展核心。
　　而随着目前国内外移动设备的越来越多，用户对于移动服务的需求也随之增多，不论在何时何地，用户都乐于通过手机获取互联网信息;
　　目前，75%中国城市智能手机用户每周会用智能手机进行社交，正接近用传统网络进行社交的比例(84%)，随着移动互联网的发展日趋成熟，通过手持移动设备获取互联网信息有望在不久未来成为主流网络接入口。

　　在现阶段的网络服务产品中，web端完整展示手机端内容，手机端浓缩web端精华，两者是相辅相成的，在互相影响也互相促进。主流的设计流程是从 web端到手机端;而国外已经有部分产品开始尝试倒序设计，优先考虑手机端，而后根据手机端功能进行延伸与扩展到web端，我相信，这同样是未来网络服务产品设计中的一个趋势。
　　当然，目前web端已有朋友网这个较为成熟的产品，在这个前提下，这次设计我们需要做的是，通过增强web设计来吸引用户下载APP。
　　1 前期讨论
　　在接到需求单之后，首先是从自身产品出发，结合国内外优秀的APP下载页进行分析。

　　而后确定这次朋友网手机客户端下载页面的几个关键点，分别是：轻量轻薄、页面空间感、浏览舒适度。
　　1.1 轻薄轻量
　　在字面意思上，轻薄轻量归根到底就是一个字“少”;
　　在对文案、画面等元素进行精简提炼，保证浏览者对于页面以及客户端有足够的认知，同时在细节上做功夫，才能做到“少即是多”的效果;不失用户认知而完整表达，是我们对于这次页面设计中“轻薄轻量”的定义;
　　1.2 页面空间感
　　其实在页面中对于信息的浏览，与在现实图书馆中的浏览状态大同小异;
　　没有谁会喜欢约束在狭小的空间里浏览信息，而我们尽可能地提供透气舒适的页面空间感给用户，才能保证用户愿意在这个页面停留多一些时间，因为起码这里不算太拥挤。
　　这一块我们主要是针对页面设计元素的处理，不需要太多的素材堆积，把握住最能表达客户端功能特点的核心内容。
　　1.3 浏览舒适度
　　用户在页面中对文字信息的浏览就像使用电脑，而过多的文案信息就像电脑系统中无用的沉积文件，会影响浏览速度与理解的;
　　关于文案信息的浏览，我们对于舒适度的定义是：快速浏览文案信息，轻易获取文案主旨;所以对于文案反复讨论，一减再简，在保证信息表达完整的情况下，尽可能地用一两句话去描述朋友网手机客户端的功能。
　　2 设计过程
　　我们觉得，设计，是要找到一个大多数人认可同时视觉美观的临界点;
　　而设计的过程则是一个从无到有，从有到优的一个更新迭代的过程。
　　2.1 这个页面的设计过程是曲折的

　　这张图的4个方案，代表着设计过程中的四个阶段，从传统的页面设计到打破框架力求简单化，再到生活情感画，以及最后的确认定稿;
　　这是一个探索与进步的过程，虽然有些曲折，但是通过期间的反复讨论，不断推倒已有的设计并重新构思，最终我们所设想的方向是对的，大家只是想做出更好的页面设计。
　　针对产品与设计本身，我们最基本的愿望是希望当用户看到这个页面时，不至于说太难看。
　　当然我们也相信可以做得更好。
　　2.2 我们在设计中的坚持
　　前后一共出了4版设计方案。在不断的优化设计中，也在持续优化提炼设计中的元素;但是最基本的坚持底线是保证页面的轻量轻薄、页面空间感与浏览舒适度。
　　这个是在前期讨论中定下的关键点，在页面设计的整个过程中，每一个版本的设计中心要点都在下一版中得到保留并优化;无论是做了删简还是做了延伸，都将最初的三个关键点定为页面设计中最基本的坚持。

　　2.3 最后的定稿
　　在经历长期的工作后，反而是到最后阶段是最要求细心的。
　　在大的页面风格与画面元素已经定下来的前提下，接下来的工作是对细节的推敲;从按钮的颜色渐变到文案的标点符号都反复推敲。并非说是说盲目的去扣细节，而是不希望在这细节处犯错，所以在文案的调整，怎么做到最精简的文案而又利于用户理解，这是我们最后的设计工作中主要部分。
　　3设计要点回顾

　　3.1 模拟用户场景
　　户外餐厅、随走随拍地逛街、结伴同行、咖啡馆、屋顶上的聊天;
　　这些在日常生活中常见的场景，其实也是我们对朋友网手机客户端用户的情景定位;而用户在相应场的场景中，对客户端的功能使用也被我们涵括到了画面中;
　　比如和闺蜜在逛街的时候，自拍的照片可以立刻通过朋友网分享给好友;而大家结伴同行，希望你乐于通过朋友网分享你们的快乐;我们希望通过模拟使用场景，对用户进行情感定位。
　　3.2 情景化物品辅助
　　打招呼、照相机、纸飞机、咖啡杯、纸杯饮料;
　　画面代表着客户端使用场景，而画面里的辅助物品则包含了场景寓意与客户端功能的两层含义，烘托场景主题，辅助客户端功能这是我们对加入这些情景化物品的初衷。
　　就好像“面对面的聊天，或许你们需要两杯饮料解解口渴，因为在朋友网聊天就是这么直接，所以需要聊的太多了。”这是我们想传达给用户的一个信号，想让用户知道，朋友网手机客户端其实真的很有意思。
　　3.3 文案一减再简
　　抓住主题，把最想表达的内容最大限度地突出，减少不必要的视觉干扰。文案不需要太多，太多文案反而因为阅读困难而抓不住主旨。所以我们强调浏览舒适度，就是把文案不断地精简提炼。力求让用户在最短时间里听到我们想说的话。
　　4 总结陈词
　　初稿和最终稿是不一样的，期间不断调整优化，大到页面风格画面元素，小到标点符号背景透明度。
　　虽然最后做出了相对满意的设计成果，但是还是有一些问题不能含糊过去的，比如画面多处阴影的整体感觉，辅助物体的处理，背景与主题的融合度等等设计上的问题没有得到完善处理。而在后续我们已经在逐步在调整与优化，虽然只是细微处的调整，但是大家真的有用心在做这个东西。
　　文章来源：腾讯ISUX

上一篇：5个步骤实现响应式Web设计方法与瀑布模式说”再见”(图文教程)

下一篇：25个CSS框架、工具、软件及样板分享