默认
打赏 发表评论 7
想开发IM:买成品怕坑?租第3方怕贵?找开源自已撸?尽量别走弯路了... 找站长给点建议
移动端IM实践:iOS版微信的多设备字体适配方案探讨
微信扫一扫关注!

本文由微信开发团队人员编写,转自 WeMobileDev,感谢。


一、为何需要字体适配?


2014下半年,微信iOS版先后适配了iPad, iPhone6/6plus。但随着这些大屏设备的登场,部分用户觉得微信的字体太小,然而也有很多用户不喜欢太大的字体。

为了满足不同用户的需求,我们实现了全局字体设置功能,在【设置->通用->字体大小】这里修改设置后,微信大部分界面都会随之缩放。

效果如下图所示:
QQ20160301-0.png

二、传统UI实现方法的局限性


关于iphone6/6plus的物理分辨率、逻辑分辨率、屏幕物理尺寸、PPI等资料,很多文章已经有详细说明了,这里就不再累赘。

对于终端开发人员来说,其实我们需要关心的,主要是各设备的逻辑分辨率和scaleFactor:
设备逻辑分辨率scaleFactor
iphone4/4s320*480@2x
iphone5/5s/5c320*568@2x
iphone6375*667@2x
iphone6 plus414*736@3x
ipad1024*768@2x

需要注意的是,iphone6和6plus可以设置标准模式和放大模式。在放大模式下,6plus会退化为375x667,此时应该当成iphone6来做适配。而iphone6会退化为320x568,应该当作iphone5来适配。

从表中可以看出,适配iphone6/6plus、ipad带来最大的变化是,屏幕宽度不再是320。以往我们可能一直习惯320宽的屏幕,所以写界面的时候容易hardcode。

例如,如下图所示,有个按钮离屏幕左右边距分别为20,我们可能会把按钮宽度写死为280:
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(20, 15, 280, 46)];

QQ20160301-1.png

但到了iphone6 plus上,屏幕宽度变成414,按钮的左右边距就变成20和114,显得不对称。在适配时,根据UI需要,此时可能会增加按钮宽度,改成20+374+20;也可能增加左右边距,改成67+280+67;也可能两者都增加,例如改成26+362+26,使得按钮宽度保持屏幕宽度的7/8。

三、微信的解决方案


为了实现这些适配需求,我们的解决方案是,使用配置文件,把界面参数从代码中分离开来,便于参数的适配。配置文件分为两部分。

第一部分是UI规范配置:把需要统一风格的UI元素定义下来。例如对于链接字体颜色,定义LINK_COLOR = rgba(87,107,149,1),所有界面包含链接时,链接的字体颜色都直接取LINK_COLOR,不单独harcode,这样有利于微信的整体UI风格统一、UI规范化,也方便以后UI调整时对链接字体颜色做统一修改。
// UI规范化
@colors{
    /* 普通列表(PlainStyle)的背景色 */
    DEFAULT_TABLE_BACKGROUND_COLOR: #2E3132;

    /* 链接字体颜色 */
    LINK_COLOR: rgba(87,107,149,1);
}

第二部分是各界面的配置:可以对颜色、字体、切片、数值、坐标、尺寸、frame等进行配置,并根据设备适配的需求定义了一些扩展属性。
#test_view{
    /* 数值 */
    button_margin1: 20;
    button_margin2: 20 EqualRatio 320;
    button_margin3: 200 EqualDifference 320;
    
    /* frame、尺寸、坐标 */
    logo_frame: 0 0 200 200; /* frame */
    logo_size: 200 200; /* size */
    logo_origin: 0 0; /* origin */

    /* 颜色相关 */
    table_bkg_color: DEFAULT_TABLE_BACKGROUND_COLOR;
    button_bkg_color1: #00C000;
    button_bkg_color2: rbga(255,255,255,0.8);
    button_bkg_color3: clear;

    logo_image: “btn_bkg.png” 40 40; /* 切片 */

    label_font: 16 bold; /* 字体 */
}

下面对其中一些配置加以说明:
button_margin2: 20 EqualRatio 320;
表示在不同设备下做等比缩放,在320宽的屏幕下是20,在iphone6 plus屏幕上就是20 / 320 * 414=26
button_margin3: 20 EqualDifference 320;
表示在不同设备下做等差缩放,在320宽的屏幕下是200,在iphone6 plus屏幕上就是200 + (414-320) = 294

table_bkg_color: DEFAULT_TABLE_BACKGROUND_COLOR;
这里使用了UI规范配置里面的定义值。

logo_image: “btn_bkg.png” 40 40;
指定了切片的文件,并指定其尺寸(不指定则默认按切片本身的尺寸)。

label_font: 16 bold;
指定字体大小,并为粗体。

EqualRatio,EqualDifference这两个关键词使界面的配置能够尽量做到一个设计稿适配多种设备。但有时候,我们需要在分设备进行单独配置,而等差和等比原则又无法满足。为了解决这个问题,每种设备单独一个配置文件,目前一共五种设备:默认(iphone5)、iphone4/4s、iphone6、iphone6plus、ipad。读取配置文件时,先读默认配置(iphone5),然后根据当前机型再读取单独的配置(如果是ipad就读ipad的配置,如果是iphone5就不用再读了)。这样取值时会优先取到单独的配置,如果没有单独配置就取到默认配置。

例如,默认配置中定义:
button_margin1: 20;
button_margin2: 20 EqualRatio 320;
button_margin3: 20;

iphone6plus的配置中定义:
button_margin1: 30;

则在iphone6plus中,取到的值分别为button_margin1为30(取6plus配置的值),button_margin2为26(取默认配置的等比原则),button_margin3为20(取默认配置的值)

四、方案实施后界面也同样需要放大


全局字体设置不是简单地修改所有字体的大小,以主界面的会话cell为例,如下图a所示,如果所有字体改大,界面会变成图b所示,很不协调,两个label的上下间距也显得太小,甚至当字体再改大时会出现重叠问题。

为了保证两个label有足够的上下边距,cell的高度需要随之增加,如图c所示。这样会导致左侧头像在cell中显得太小,于是头像的宽高也要随之放大,头像上的红点也要跟着放大,……,最终整个界面很多元素(字体、宽高、边距等)都需要放大。

QQ20160301-2.png

至于各元素要放大多少,一开始是想只推出一个大字体版本,由设计师出一套方案。但仔细想想工作量太大了,所有界面都要再出一套设计稿,而且不够灵活,不同设备上的大字体版都只能按照这套设计稿来。最后我们决定用等比放大的原则,所有元素按照统一一个比例进行放大,这样出来的效果还不错,重要的是大大减少了设计和开发的工作量。具体操作是:每个机型设五档字体,设计师确定各机型上每档字体的放大比例,开发写界面时,把字号大小、宽高、边距等值写到配置文件里,并指定这些值是否要随字体设置等比缩放。

在配置文件中,我们增加了关键词dynamic,使得界面能够支持根据字体设置缩放。例如:
button_height: 42 dynamic;
表示在不同字体大小设置下,动态缩放。标准字体下高度是42,字体放大50%后高度就是63。

logo_image: “btn_bkg.png” 40 40 dynamic;
指定了切片的文件,并指定其尺寸(不指定则默认按切片本身的尺寸),并且在不同字体大小设置下,动态缩放。

label_font: 16 bold dynamic;
指定字体大小,并为粗体,同样根据字体设置动态放大。

需要注意的是,在对界面参数等比放大时,放大后的长度值要向上取整。这是因为UIView setFrame传入的CGRect,如果坐标或宽高值为小数,可能导致文字出现模糊(不锐利)、view出现黑边等现象。

五、WebView上的实现方案


iOS上,可以在webview页面load完后,设置页面body的style.webkitTextSizeAdjust属性,对页面进行放大。例如:
document.getElementsByTagName("body")[0].style.webkitTextSizeAdjust=“150%”;

这种方法实现简单,但有两个问题:
1、对于复杂的图文页面,放大后的页面很难看。例如腾讯新闻页面的底部,放大后如下图所示。这是因为字体放大了,但图片、宽高等其它元素没有放大。
QQ20160301-3.png
2、由于要等页面load完才能重写webkitTextSizeAdjust属性,导致页面load完后还会再刷新一下。

幸好微信里的webview阅读90%都是公众号文章,这些页面样式相对统一,而且是微信团队可控的。

针对公众号文章,我们做了以下优化:
1、把用户的字体设置作为参数传给公众号平台,由他们调整页面样式后再出页面,这样load出来的页面style就是已经放大的了,不需要客户端重写style导致页面刷新一次。
<html style="-webkit-text-size-adjust: 160%;line-height:1”>

2、如果用户手动修改webview的字体大小,客户端会触发一个jsapi,公众号页面监听并实现这个jsapi,对页面样式进行调整。这样把字体修改的实现方法交给页面本身,而不是简单用webkitTextSizeAdjust,可以达到更好的放大效果。
WeixinJSBridge.on(‘menu:setfont’,function(res){
    // use fontScale, then set -webkit-text-size-adjust and line-height
});

对于非公众号文章,目前默认不随全局字体设置做放大,如果用户手动修改webview的字体大小,会用webkitTextSizeAdjust修改。后续可以把这个jsapi推广到腾讯新闻插件,甚至开放出去,尽量把字体修改的实现方式交给页面。

六、针对iOS9的iPad分屏


WWDC2015上推出了iPad分屏多任务功能,使得iOS设备的逻辑分辨率又多了五种:
QQ20160301-4.png

分屏类型分辨率
竖屏-小屏320*1024
竖屏-大屏438*1024
横屏-小屏320*768
横屏-半屏507*768
横屏-大屏694*768

使用目前的适配方案,能够很快地适配iPad分屏。具体方法是:
  • 对于320*768和320*1024的屏幕大小,用iphone5的配置参数;
  • 对于其它屏幕大小,使用ipad的配置参数,并对必要的参数根据屏幕大小指定等差/等比缩放。

界面参数使用配置文件的好处总结


1、能够很快适配不同机型:
     对必要的参数指定等差缩放或等比缩放,就可以做到一个设计稿适配多种设备。

2、方便对不同机型做特殊处理:
     有时候个别参数在不同设备上有差异,而等差/等比原则又无法满足需求。
     如果参数写在代码里面,就有一堆机型的if判断:
if (isIpad) …;
else if (isIphone6) …;
else …
而写在配置文件里,只需要根据不同机型读相应配置文件即可。

3、能够很快适配不同字体大小:
    配置文件里指定哪些参数需要等比缩放,哪些是固定值,读参数的时候做一下处理,就可以实现界面缩放,不需要修改代码。

4、方便界面参数调整:
     设计师做界面微调时,可以自己修改配置文件,快速确认效果,不需要先跟开发沟通,等开发修改完代码后再确认。一方面减少了沟通成本,另一方面也减轻了开发的负担。

全站即时通讯技术资料分类


[1] 网络编程基础资料:
TCP/IP详解 - 第11章·UDP:用户数据报协议
TCP/IP详解 - 第17章·TCP:传输控制协议
TCP/IP详解 - 第18章·TCP连接的建立与终止
TCP/IP详解 - 第21章·TCP的超时与重传
理论经典:TCP协议的3次握手与4次挥手过程详解
理论联系实际:Wireshark抓包分析TCP 3次握手、4次挥手过程
计算机网络通讯协议关系图(中文珍藏版)
NAT详解:基本原理、穿越技术(P2P打洞)、端口老化等
UDP中一个包的大小最大能多大?
Java新一代网络编程模型AIO原理及Linux系统AIO介绍
NIO框架入门(三):iOS与MINA2、Netty4的跨平台UDP双向通信实战
NIO框架入门(四):Android与MINA2、Netty4的跨平台UDP双向通信实战
>> 更多同类文章 ……

[2] 有关IM/推送的通信格式、协议的选择:
为什么QQ用的是UDP协议而不是TCP协议?
移动端即时通讯协议选择:UDP还是TCP?
如何选择即时通讯应用的数据传输格式
强列建议将Protobuf作为你的即时通讯应用数据传输格式
移动端IM开发需要面对的技术问题(含通信协议选择)
简述移动端IM开发的那些坑:架构设计、通信协议和客户端
理论联系实际:一套典型的IM通信协议设计详解
58到家实时消息系统的协议设计等技术实践分享
>> 更多同类文章 ……

[3] 有关IM/推送的心跳保活处理:
Android进程保活详解:一篇文章解决你的所有疑问
Android端消息推送总结:实现原理、心跳保活、遇到的问题等
为何基于TCP协议的移动端IM仍然需要心跳保活机制?
微信团队原创分享:Android版微信后台保活实战分享(进程保活篇)
微信团队原创分享:Android版微信后台保活实战分享(网络保活篇)
移动端IM实践:实现Android版微信的智能心跳机制
移动端IM实践:WhatsApp、Line、微信的心跳策略分析
>> 更多同类文章 ……

[4] 有关WEB端即时通讯开发:
新手入门贴:史上最全Web端即时通讯技术原理详解
Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
SSE技术详解:一种全新的HTML5服务器推送事件技术
Comet技术详解:基于HTTP长连接的Web端实时通信技术
WebSocket详解(一):初步认识WebSocket技术
socket.io实现消息推送的一点实践及思路
>> 更多同类文章 ……

[5] 有关IM架构设计:
浅谈IM系统的架构设计
简述移动端IM开发的那些坑:架构设计、通信协议和客户端
一套原创分布式即时通讯(IM)系统理论架构方案
从零到卓越:京东客服即时通讯系统的技术架构演进历程
蘑菇街即时通讯/IM服务器开发之架构选择
腾讯QQ1.4亿在线用户的技术挑战和架构演进之路PPT
微信技术总监谈架构:微信之道——大道至简(演讲全文)
如何解读《微信技术总监谈架构:微信之道——大道至简》
快速裂变:见证微信强大后台架构从0到1的演进历程(一)
17年的实践:腾讯海量产品的技术方法论
>> 更多同类文章 ……

[6] 有关IM安全的文章:
即时通讯安全篇(一):正确地理解和使用Android端加密算法
即时通讯安全篇(二):探讨组合加密算法在IM中的应用
即时通讯安全篇(三):常用加解密算法与通讯安全讲解
即时通讯安全篇(四):实例分析Android中密钥硬编码的风险
传输层安全协议SSL/TLS的Java平台实现简介和Demo演示
理论联系实际:一套典型的IM通信协议设计详解(含安全层设计)
微信新一代通信安全解决方案:基于TLS1.3的MMTLS详解
来自阿里OpenIM:打造安全可靠即时通讯服务的技术实践分享
>> 更多同类文章 ……

[7] 有关实时音视频开发:
即时通讯音视频开发(一):视频编解码之理论概述
即时通讯音视频开发(二):视频编解码之数字视频介绍
即时通讯音视频开发(三):视频编解码之编码基础
即时通讯音视频开发(四):视频编解码之预测技术介绍
即时通讯音视频开发(五):认识主流视频编码技术H.264
即时通讯音视频开发(六):如何开始音频编解码技术的学习
即时通讯音视频开发(七):音频基础及编码原理入门
即时通讯音视频开发(八):常见的实时语音通讯编码标准
即时通讯音视频开发(九):实时语音通讯的回音及回音消除概述
即时通讯音视频开发(十):实时语音通讯的回音消除技术详解
即时通讯音视频开发(十一):实时语音通讯丢包补偿技术详解
即时通讯音视频开发(十二):多人实时音视频聊天架构探讨
即时通讯音视频开发(十三):实时视频编码H.264的特点与优势
即时通讯音视频开发(十四):实时音视频数据传输协议介绍
即时通讯音视频开发(十五):聊聊P2P与实时音视频的应用情况
即时通讯音视频开发(十六):移动端实时音视频开发的几个建议
即时通讯音视频开发(十七):视频编码H.264、V8的前世今生
简述开源实时音视频技术WebRTC的优缺点
良心分享:WebRTC 零基础开发者教程(中文)
>> 更多同类文章 ……

[8] IM开发综合文章:
移动端IM开发需要面对的技术问题
开发IM是自己设计协议用字节流好还是字符流好?
请问有人知道语音留言聊天的主流实现方式吗?
IM系统中如何保证消息的可靠投递(即QoS机制)
谈谈移动端 IM 开发中登录请求的优化
完全自已开发的IM该如何设计“失败重试”机制?
微信对网络影响的技术试验及分析(论文全文)
即时通讯系统的原理、技术和应用(技术论文)
开源IM工程“蘑菇街TeamTalk”的现状:一场有始无终的开源秀
>> 更多同类文章 ……

[9] 开源移动端IM技术框架资料:
开源移动端IM技术框架MobileIMSDK:快速入门
开源移动端IM技术框架MobileIMSDK:常见问题解答
开源移动端IM技术框架MobileIMSDK:压力测试报告
开源移动端IM技术框架MobileIMSDK:Android版Demo使用帮助
开源移动端IM技术框架MobileIMSDK:Java版Demo使用帮助
开源移动端IM技术框架MobileIMSDK:iOS版Demo使用帮助
开源移动端IM技术框架MobileIMSDK:Android客户端开发指南
开源移动端IM技术框架MobileIMSDK:Java客户端开发指南
开源移动端IM技术框架MobileIMSDK:iOS客户端开发指南
开源移动端IM技术框架MobileIMSDK:Server端开发指南
>> 更多同类文章 ……

[10] 有关推送技术的文章:
iOS的推送服务APNs详解:设计思路、技术原理及缺陷等
Android端消息推送总结:实现原理、心跳保活、遇到的问题等
扫盲贴:认识MQTT通信协议
一个基于MQTT通信协议的完整Android推送Demo
求教android消息推送:GCM、XMPP、MQTT三种方案的优劣
移动端实时消息推送技术浅析
扫盲贴:浅谈iOS和Android后台实时消息推送的原理和区别
绝对干货:基于Netty实现海量接入的推送服务技术要点
移动端IM实践:谷歌消息推送服务(GCM)研究(来自微信)
为何微信、QQ这样的IM工具不使用GCM服务推送消息?
>> 更多同类文章 ……

[11] 更多即时通讯技术好文分类:
http://www.52im.net/forum.php?mod=collection&op=all

附录:有关QQ、微信的文章汇总


[1] 有关QQ、微信的技术文章:
微信后台团队:微信后台异步消息队列的优化升级实践分享
微信团队原创分享:微信客户端SQLite数据库损坏修复实践
腾讯原创分享(一):如何大幅提升移动网络下手机QQ的图片传输速度和成功率
腾讯原创分享(二):如何大幅压缩移动网络下APP的流量消耗(下篇)
腾讯原创分享(二):如何大幅压缩移动网络下APP的流量消耗(上篇)
微信Mars:微信内部正在使用的网络层封装库,即将开源
如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源
开源libco库:单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]
微信新一代通信安全解决方案:基于TLS1.3的MMTLS详解
微信团队原创分享:Android版微信后台保活实战分享(进程保活篇)
微信团队原创分享:Android版微信后台保活实战分享(网络保活篇)
Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]
微信团队原创分享:Android版微信从300KB到30MB的技术演进
微信技术总监谈架构:微信之道——大道至简(演讲全文)
微信技术总监谈架构:微信之道——大道至简(PPT讲稿) [附件下载]
如何解读《微信技术总监谈架构:微信之道——大道至简》
微信海量用户背后的后台系统存储架构(视频+PPT) [附件下载]
微信异步化改造实践:8亿月活、单机千万连接背后的后台解决方案
微信朋友圈海量技术之道PPT [附件下载]
微信对网络影响的技术试验及分析(论文全文)
一份微信后台技术架构的总结性笔记
架构之道:3个程序员成就微信朋友圈日均10亿发布量[有视频]
快速裂变:见证微信强大后台架构从0到1的演进历程(一)
快速裂变:见证微信强大后台架构从0到1的演进历程(二)
微信团队原创分享:Android内存泄漏监控和优化技巧总结
全面总结iOS版微信升级iOS9遇到的各种“坑”
微信团队原创资源混淆工具:让你的APK立减1M
微信团队原创Android资源混淆工具:AndResGuard [有源码]
Android版微信安装包“减肥”实战记录
iOS版微信安装包“减肥”实战记录
移动端IM实践:iOS版微信界面卡顿监测方案
微信“红包照片”背后的技术难题
移动端IM实践:iOS版微信小视频功能技术方案实录
移动端IM实践:Android版微信如何大幅提升交互性能(一)
移动端IM实践:Android版微信如何大幅提升交互性能(二)
移动端IM实践:实现Android版微信的智能心跳机制
移动端IM实践:WhatsApp、Line、微信的心跳策略分析
移动端IM实践:谷歌消息推送服务(GCM)研究(来自微信)
移动端IM实践:iOS版微信的多设备字体适配方案探讨
>> 更多同类文章 ……

[2] 有关QQ、微信的技术故事:
技术往事:创业初期的腾讯——16年前的冬天,谁动了马化腾的代码
技术往事:史上最全QQ图标变迁过程,追寻IM巨人的演进历史
开发往事:深度讲述2010到2015,微信一路风雨的背后
开发往事:微信千年不变的那张闪屏图片的由来
开发往事:记录微信3.0版背后的故事(距微信1.0发布9个月时)
一个微信实习生自述:我眼中的微信开发团队
>> 更多同类文章 ……

即时通讯网 - 即时通讯开发者社区! 来源: - 即时通讯开发者社区!

上一篇:一个微信实习生自述:我眼中的微信开发团队下一篇:移动端IM实践:Android版微信如何大幅提升交互性能(一)

本帖已收录至以下技术专辑

推荐方案
评论 7
每次新版iPhone的发布,都是开发人员的噩梦,无尽的适配。。。
不得不佩服iOS UIKit设计者的短视,早期的iOS版几乎没有考虑过屏幕适配的问题。

那复杂无比且如同鸡肋的AutoLayout简直让人抓狂!
签名: 国庆长假还没有缓过来,请让我静一静,产品狗死远点...
关键是即使用了AutoLayout,然并卵,一个新的界面特性或屏幕分辨率出来依然要去适配。。。
签名: 国庆长假还没有缓过来,请让我静一静,产品狗死远点...
看了这屏幕适配真是让人头大。

还是我大android好啊,这些都不是个事~~~~
引用:冈阪日川 发表于 2016-03-01 17:25
看了这屏幕适配真是让人头大。

还是我大android好啊,这些都不是个事~~~~

要是哪天iOS的设计都能低下它高贵的头颅,仿照Android实现跨屏幕方案,那该多美。

那帮sb 太自以为是了。
引用:HelloKing 发表于 2016-03-01 17:30
要是哪天iOS的设计都能低下它高贵的头颅,仿照Android实现跨屏幕方案,那该多美。

那帮sb 太自以为是 ...

楼上的不要瞎扯,iOS适配不是挺好实现吗,看看这篇:http://www.cocoachina.com/ios/20141217/10669.html
签名: 好久没来了,签个到
打赏楼主 ×
使用微信打赏! 使用支付宝打赏!

返回顶部