腾讯WSD：手机QQ浏览器界面布局设计心得（转）
经过几个月的时间和大家的努力，手机QQ浏览器(android版)从 2.0 陆续更新到的
2.6。在经历了设计的千回百转和架构的不断尝试后，终于有了个新面貌，使用体验也比之前版本有了较大提升。不过，这也仅仅是万里长征第一步，这里先和大家分享下这第一步背后的设计心得。
　　国内局势
　　我们可以先来了解国内局势。目前，浏览器市场可谓战火不断，狼烟四起。姑且不说PC端各大浏览器大牛厂商角力数十年。单看手机端，特别是android平台，似乎早已成为兵家必争之地。Opera，起兵早，国际声誉高，想方设法吞噬国内市场。UC,靠多年的积累，早已成为一方霸主。海豚，后起之秀，也在不断招兵买马。还有迷人，天天，go，百度等各路势力，以及android默认浏览器和正在发力的firefox。而手机QQ浏览器就夹在其中，真是前有虎，后有狼的。想要保住现有的地盘，并不断壮大，不下点苦功夫，不来点磨砥刻厉的专业精神是不行的。
　　追本溯源，产品定义&yixieshi
　　这是一款怎样的浏览器?
　　它会给用户带来什么样的感受?
　　产品想给人一种怎样的印象?
　　如何延续品牌的优良基因?
　　….&互联网的一些事
　　这些最根本的问题摆在我们面前，通过对浏览器本身的特质探求，我们认为浏览器应该以高效的性能,便捷的操作,来达到舒适的阅读体验。&yixieshi
　　让用户安静愉悦的享受内容，成了手机浏览器设计的重心。
　　关键词提取&互联网的一些事
　　根据对产品的定义，我们找到了设计方向，并提取出了几个关键词：清新、舒适、简洁、细腻、平静yixieshi
　　那如何从视觉上来表达这些个关键词呢?
　　让我们回到现实生活中，搜集一些与此关键词相关的图片，feel 一下这样的感觉。
　　色彩定义
　　从这些图片中，我们可以方便的找出符合关键词气质的色彩。&yixieshi
　　蓝色，易让人联想到天空的辽阔与海洋的深邃，让人有宁静，清澈，理智，科技的色彩印象。同时，它又是公司其它业务的基础色系，从而在色彩上延续了品牌基因。因此，蓝色很自然的作为主体色系，沉静稳重的深蓝作为菜单系。蓝色在绿色的映衬下，让人感受到清新淡雅，明亮，干净。同时，加入橘黄色点缀，使其显得明快和活跃。
　　色彩像音乐一样，是一种感觉。音乐需要靠音阶来保持秩序，而形成一个体系。同样的，色彩也需要靠三属性来维持界面的层次与秩序。
　　质感表达
　　质感以扁平轻量为原则，一是比较符合UI设计的大体趋势，二是对于以呈现内容为主的界面来说会更加友好，增加亲切感。因此，运用柔和渐变，略透明，亚光质感等方式来减少大的视觉跳跃并使层次结构清晰。描边,渐变,线条,阴影等,不用太宽大也能有效增强设计。
　　信息分类，层次结构
　　清晰的信息结构和功能布局，能够增加产品的易用性，减少用户的学习成本，提高产品的亲和力。手机浏览器整体划分为三个区域，最上输入导航区，中间内容区，下方菜单区。同时集中信息在内容区展示，提高用户操作效率，一键直达内容。左右内容自成体系，无缝连接处理，增强滑屏体验。合适的灰度与色彩对比度，减少用户的视觉疲劳，增加可读性。
　　简化设计
　　之前版本的头部设计虽然美观，但占去较多空间。手机方寸之地，都得充分利用。对于以信息和内容为主的浏览器来说，减法设计是必须的，弱化非功能性的设计元素，同时增大内容可用空间。结构上首尾也有所呼应。&互联网的一些事
　　简约是美 少即是多。
　　小细节完善内容感官&互联网的一些事
　　少量纹理的运用，也可使界面更加细腻，不单调。
　　等待过程的设计
　　David Maister 的等待心理学告诉我们：无所适事的等待比有事可干的等待感觉要长。
　　因此，我们在网页载入过程中加入功能宣导，每隔两秒钟变换一句，转移用户注意力，避免用户感觉等待时间过长，增加产品的沉浸式体验。&互联网的一些事
　　传统控件的新设计
　　Android厂商各家定制系统纷繁复杂，系统控件也是五花八门。我们从新设计了弹出菜单、对话框等系统控件，避免不同的定制系统出现较大感官差异，全方位统一产品视觉体验。
　　简约图标的运用也是UI设计的一个发展趋势。在准确表意的同时，排除不必要的多余元素，保持轻量的渐变，明确的描边，能使图标更加精致，也符合整体界面的风格。同时，让用户更加快速直观的理解选项的含义。&yixieshi
　　经过快速的原型制作，不断的尝试与PK，汇聚成了现在的QQ浏览器，没有最好，只有更好。只要能用最低的交互视觉成本来帮助用户解决问题，就是好设计。
　　遇到的问题&互联网的一些事
　　纷繁复杂的终端适配
　　Andriod系统目前已经成为全球使用人数最多的智能手机系统，在用户普及量大的同时，也存在一些十分明显的问题，如厂家多，各有各的规范。机型多，手机显示效果差异大。分辨率多，终端适配困难等。&互联网的一些事
　　为了简化设计并且兼容更多的手机屏幕，最大限度的创造良好的视觉体验，就需要为主流的中精度屏幕 (HVGA) 和高精度屏幕(WVGA)
分别提供两套图，并需要充分利用可拉伸图片的特性，以保证在那些奇怪分辨率下的显示效果。&互联网的一些事
　　令人抓狂的图片抖动
　　另外一个容易遇到的问题，是色彩显示效果，图片出现明显色阶。&互联网的一些事
　　由于手机硬件的不同和系统本身的限制，程序贴图后，含有渐变的图在不同手机上，可能会出现不同的显示效果。也许在google N1
上正常显示，在moto里程碑上就出现明显色阶。这时，需要调整设计图片，尽量避免过大或过细的渐变，在渐变图形里加入斜纹理，也会得到较大的改善。
　　说到这里，整个的设计过程也几近结束，然而我们对产品的持续优化和改进远不会结束。感谢整个团队的给力支持和其间所付出的辛勤劳动。版本发布后，得到了许多用户的肯定和赞赏，虽然目前版本还存在诸多的不足，但我相信我们都会逐步提高，因为我们对体验有极致的追求。革命尚未获成功，同志仍旧需努力，万里长征接着走，好戏还会在后头。^_^&yixieshi
　　(本文出自Tencent WSD Blog，转载时请注明出处)
本文链接：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。推荐这篇日记的豆列
&&&&&&&&&&&&&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
再造 &手机QQ& 侧滑菜单（二）&&高仿左视图
摘要：上一篇:再造“手机QQ”侧滑菜单(一)——实现侧滑效果代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ本篇文章中,我们将一起使用AutoLayout高仿手Q的左侧视图,力争达成从布局到动画的全面类似。由于实现过程繁复,本文将主要讲述思路和心得体会,将不再大段大段地粘贴代码。手Q左视图的展现方式细部动画仔细观察,在把主页往右拖动时,左侧菜单有一个平移和放大的结合动画,并且有一层黑色遮罩层,透明度在不断变化,如下图:适配逻辑我
上一篇:再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果
代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ
本篇文章中,我们将一起使用 Auto Layout 高仿手Q的左侧视图,力争达成从布局到动画的全面类似。由于实现过程繁复,本文将主要讲述思路和心得体会,将不再大段大段地粘贴代码。
手Q左视图的展现方式
仔细观察,在把主页往右拖动时,左侧菜单有一个平移和放大的结合动画,并且有一层黑色遮罩层,透明度在不断变化,如下图:
我对比了 4 寸屏幕和 4.7 寸屏幕上的左视图,很明点的一点是,4.7 寸屏幕上的元素尺寸和字体都比 4 寸屏幕上的大一点,并且有明显的模糊,故手Q采用的应该是 4 寸以上屏幕等比放大的方案。
对比图如下:
弄明白手Q的实现细节之后,我们就开始着手实现界面及功能了。
使用 StoryBoard 构造左视图
在 StoryBoard 中新增一个 View Controller,并新增一个名为 LeftViewController 的 UIViewController 类,并在 StoryBoard 中完成绑定。然后搭建出左视图的界面,并使用 Auto Layout 进行完全约束。
不熟悉 Auto Layout 的同学可以阅读《Auto Layout 使用心得》系列文章。
在普通 UIViewController 中使用 UITableView 的方法请看:《如何在普通 UIViewController 中使用 UITableView》
效果图如下:
上图中我为了能够显示出白色的字把 LeftViewController 主 view 的背景调成了绿色,默认使用 Default 即可(透明色)。
取出左视图并增加遮罩层
代码:https://github.com/johnlui/SwiftSideslipLikeQQ/blob/master/SwiftSideslipLikeQQ/ViewController.swift#L34-L50
这里有一点心得体会:为了保证 LeftViewController 中各类事件的正常相应,需要给 ViewController 增加成员变量(对象): var&leftViewController:&LeftViewController!
这跟 《AVAudioPlayer 如何在页面呈现之后按需初始化》 中提出的解决方案是一个道理。
完善跟左视图有关的动画代码,过于繁复请大家直接参考项目代码,此处不再表述:
https://github.com/johnlui/SwiftSideslipLikeQQ/blob/master/SwiftSideslipLikeQQ/ViewController.swift
下一步:再造 “手机QQ” 侧滑菜单(三)——视图联动
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
邮箱低至5折
推荐购买再奖现金，最高25%
&200元/3月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
再造 &手机QQ& 侧滑菜单（二）&&高仿左视图相关信息，包括
的信息，所有再造 &手机QQ& 侧滑菜单（二）&&高仿左视图相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International请问为啥我的手机QQ不在界面显示?如何操作能在界面上显示?谢谢了!
按时间排序
可以在桌面空白处长按2秒然后找到添加应用图标，然后找到QQ点上，或者在桌面上安菜单键通常是手机最左下角的那个按键，然后调选桌面设置，再选添加图标之类的，还有可以在应用列表里找到QQ图标然后长按它2秒等它变色了或是手机震了一下就按着拖到屏幕上的最下面的一排图标的中间那个图标，然后就会回到桌面上，找个空的位置把QQ拖到那里才放手就可以啦！注意在从按图标2秒那一刻起到最后才能放手，期间一直按着QQ的图标
在程序中找到qq,点住复制快捷方式会直接跳到桌面(桌面要有位置，)
你好，你在桌面设置快捷方式就可以的，你长按桌面就会有提示的。望采纳
桌面图标设置问题。重新安装后将Q的图标拖到桌面。如果拖了还是看不到！就在待机桌面进行桌面图标动态设置
找到qq图标按住就到桌面了
您好！您可以清除一下数据后在重新安装该软件，清除数据前请记得备份好个人资料。感谢您对魅族的支持和关注，祝您生活愉快！
你指电脑还是手机？
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：为什么我升级了QQ后界面变大了_百度知道
为什么我升级了QQ后界面变大了
缩放不回去，而且还不清楚，有病毒了吗？
我有更好的答案
关于最近QQ升级后主面板以及聊天窗口变大的问题，O来给你们解答一下，“设置”里面，“基本设置“——“主面板”——”界面管理器“，然后看窗口右上边有一个设置的符号，点开，最后一项是”开启DPI适配“，前边√去掉，确定，重新登录QQ，OK~望采纳，3Q
右键个性化里面显示
然后调回100%
看图，打开设置界面之后找到界面管理器，打开后点红圈所标，把最后一项“开起DPI适配”取消勾选，关闭设置后重新启动QQ。
有没解决啊
&很遗憾，我也遇到了这个问题，刚查过，暂时没有解决办法：&您选择了&&10、QQ软件7.5好友列表等字体变大的问题&&，请继续选择：&&您好，字体变大的情况我们已经了解，还请您关注后续版本更新，给您带来不便还请您谅解。&&&返回主菜单&&
其他21条回答
为您推荐：
其他类似问题
您可能关注的内容
读音的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。