经验分享:迅雷离线下载无线端设计总结
2012-06-05 21:38
746 查看
迅雷离线下载是无线事业部今年新开发的一款产品,自3月份立项开始,我就接手离线下载for iPad的设计任务,1.0发版之后,接着Android版也紧跟其后,我还没来得及总结就开始投入离线下载for Android的设计了。之后又继续设计了这两个无线端的1.2版,现在,终于能抽出空来整理离线下载设计的文稿和思路,和大家分享。
1.分析产品需求文档
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/96d479a0d9e68bb7808572116612858e.jpg)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/ddbd4fc20baff89bda40e5308a2c448e.jpg)
2.设计
a .Logo设计
Logo设计不像界面设计那样需要在电脑前周密地思考,我在许多空闲的时候,比如上下班的路上、排队买饭、洗澡、睡觉前都会想一想。一旦有了想法,立即拿出纸笔画起来,甚至没有纸笔的时候就用手指在手掌上写写划划,引得旁人斜眼不解。
和产品经理以及项目成员开会讨论后提炼出迅雷离线下载的3个关键词:云、下载、速度。下图中第一稿缺少云的概念;第二稿过于普通,有许多类似的图形;第三稿缺少视觉重点;第四稿满足所有的关键词,并在视觉上下载和云图形巧妙地结合在一起。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/3a3f62a143156555a34e11bb71af02f9.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/b945bcbdb18b08c46a5ed960345f1e6a.png)
b.界面设计
将启动界面延展到资源导航、离线空间和用户设置。但受到设备自身的存储空间限制,本地文件可容纳的文件相对少,加上本地影片文件提取截屏,为了使用户对本地各类型的文件图标一目了然,所以在视觉上采用了写实设计。并且无网络时,迅雷离线下载只能打开本地文件,这也需要加强本地功能的设计感。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/7f700eba966be2497d4bd4792b407155.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/73a4ba5345567a00ccc74ef984ce028b.png)
c.图标设计
图标的整体性在整个界面中也占据非常重要的角色,我认真对每一个图标进行设计。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/9c4a78418a84a6ba8ae53b62e40b7c0d.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/3c4c9f9fbab0a2199fbcc26e315b4599.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/7517943a3f062b507b7aa897af205969.png)
3.最后,附上android版离线下载设计稿。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/584fa0e9fad61b782b85a63ebc44ac85.png)
谢谢。
附上【迅雷离线下载】下载地址:http://m.xunlei.com/detail_lixian_ipad.html
1.分析产品需求文档
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/96d479a0d9e68bb7808572116612858e.jpg)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/ddbd4fc20baff89bda40e5308a2c448e.jpg)
2.设计
a .Logo设计
Logo设计不像界面设计那样需要在电脑前周密地思考,我在许多空闲的时候,比如上下班的路上、排队买饭、洗澡、睡觉前都会想一想。一旦有了想法,立即拿出纸笔画起来,甚至没有纸笔的时候就用手指在手掌上写写划划,引得旁人斜眼不解。
和产品经理以及项目成员开会讨论后提炼出迅雷离线下载的3个关键词:云、下载、速度。下图中第一稿缺少云的概念;第二稿过于普通,有许多类似的图形;第三稿缺少视觉重点;第四稿满足所有的关键词,并在视觉上下载和云图形巧妙地结合在一起。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/3a3f62a143156555a34e11bb71af02f9.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/b945bcbdb18b08c46a5ed960345f1e6a.png)
b.界面设计
将启动界面延展到资源导航、离线空间和用户设置。但受到设备自身的存储空间限制,本地文件可容纳的文件相对少,加上本地影片文件提取截屏,为了使用户对本地各类型的文件图标一目了然,所以在视觉上采用了写实设计。并且无网络时,迅雷离线下载只能打开本地文件,这也需要加强本地功能的设计感。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/7f700eba966be2497d4bd4792b407155.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/73a4ba5345567a00ccc74ef984ce028b.png)
c.图标设计
图标的整体性在整个界面中也占据非常重要的角色,我认真对每一个图标进行设计。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/9c4a78418a84a6ba8ae53b62e40b7c0d.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/3c4c9f9fbab0a2199fbcc26e315b4599.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/7517943a3f062b507b7aa897af205969.png)
3.最后,附上android版离线下载设计稿。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015040/584fa0e9fad61b782b85a63ebc44ac85.png)
谢谢。
附上【迅雷离线下载】下载地址:http://m.xunlei.com/detail_lixian_ipad.html
相关文章推荐
- android4.4系统源码下载编译经验分享及总结(2014最新实践)
- 经验分享:一淘ux图标设计总结
- 经验分享:腾讯招聘官网改版项目总结
- thinkphp的目录结构设计经验总结
- web架构设计经验分享
- web架构设计经验分享
- 分享一些曾经设计的ASP.NET自定义服务端控件(附源程序下载)
- 经验分享:iOS平台设计规范(包括ios7)
- web架构设计经验分享
- 私活后的 WPF 设计经验总结
- 这是我们公司总结的一些关于中文乱码问题的一些解决方案和经验和大家分享!
- WEB 架构设计经验分享
- EMC设计技巧及经验总结2:设计的基本原则
- CMDB经验分享之 – 剖析CMDB的设计过程
- 后台经验分享:如何做权限管理系统设计?
- 分布式系统设计心得与经验总结
- [综合面试] 牛人整理分享的面试知识:操作系统、计算机网络、设计模式、Linux编程,数据结构总结
- 框架模块设计经验总结
- 单片机硬件设计经验总结(转)
- [经验分享] Android 系统 UI 效率低下的框架设计的问题