整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
文件類(lèi)型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
新的解析順序：不再基于SGML。
繪畫(huà) canvas;
用于媒介回放的 video 和 audio 元素;
語(yǔ)意化更好的內(nèi)容元素:article、footer、header、nav、section;
表單控件:calendar、date、time、email、url、search;
input元素的新類(lèi)型：date, email, url等。
新的技術(shù): webworker, websocket, Geolocation;
新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。
全域?qū)傩裕篿d, tabindex, repeat。
新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新應(yīng)用程序接口:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，naframes；
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋(píng)果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)
在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍
那么，前端的應(yīng)對(duì)方案是：
設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2
//例如圖片寬高為：200px*200px，那么寫(xiě)法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫(xiě)法為20px
.css{font-size:20px}
ios用戶(hù)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0.X就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}
android用戶(hù)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
另外，有些機(jī)型去除不了，如小米2
對(duì)于按鈕類(lèi)還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽
通用
.css{-webkit-appearance:none;}
偽元素改變number類(lèi)型input框的默認(rèn)樣式
input[type=number]::-webkit-textfield-decoration-container {
background-color: transparent;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
.css{-webkit-touch-callout: none}
.css{-webkit-user-select:none}
打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>
發(fā)短信，winphone系統(tǒng)無(wú)效 <a href="sms:10086">發(fā)短信給: 10086</a>
寫(xiě)郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>
應(yīng)對(duì)方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
通過(guò)transform的3d屬性改去硬件加速可以解決閃屏問(wèn)題
開(kāi)啟硬件加速
1）解決頁(yè)面閃白
2）保證動(dòng)畫(huà)流暢
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
<input autocapitalize="off" autocorrect="off" />
input::-webkit-input-speech-button {display: none}
盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫(huà)
不使用position的left和top來(lái)定位
利用translate3D開(kāi)啟GPU加速
ios下fixed元素容易定位出錯(cuò)，軟鍵盤(pán)彈出時(shí)，影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好，軟鍵盤(pán)彈出時(shí)，不會(huì)影響fixed元素定位
ios4下不支持position:fixed
解決方案
可用isroll.js，暫無(wú)完美方案
1）PC優(yōu)化手段在Mobile側(cè)同樣適用
2）在Mobile側(cè)我們提出三秒種渲染完成首屏指標(biāo)
3）基于第二點(diǎn)，首屏加載3秒完成或使用Loading
4）基于聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)，所以首屏資源不應(yīng)超過(guò)1014KB
5）Mobile側(cè)因手機(jī)配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)
6）基于第五點(diǎn)，要合理處理代碼減少渲染損耗
7）基于第二、第五點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置
8）加載完成后用戶(hù)交互使用時(shí)也需注意性能
[加載優(yōu)化]
加載過(guò)程是最為耗時(shí)的過(guò)程，可能會(huì)占到總耗時(shí)的80%時(shí)間，因此是優(yōu)化的重點(diǎn)
因?yàn)槭謾C(jī)瀏覽器同時(shí)響應(yīng)請(qǐng)求為4個(gè)請(qǐng)求（Android支持4個(gè)，iOS 5后可支持6個(gè)），所以要盡量減少頁(yè)面的請(qǐng)求數(shù)，首次加載同時(shí)請(qǐng)求數(shù)不能超過(guò)4個(gè)
a) 合并CSS、JavaScript
b) 合并小圖片，使用雪碧圖
使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長(zhǎng)Cache（長(zhǎng)Cache資源的更新可使用時(shí)間戳）
a) 緩存一切可緩存的資源
b) 使用長(zhǎng)Cache（使用時(shí)間戳更新Cache）
c) 使用外聯(lián)式引用CSS、JavaScript
減少資源大小可以加快網(wǎng)頁(yè)顯示速度，所以要對(duì)HTML、CSS、JavaScript等進(jìn)行代碼壓縮，并在服務(wù)器端設(shè)置GZip
a) 壓縮（例如，多余的空格、換行符和縮進(jìn)）
b) 啟用GZip
寫(xiě)在HTML頭部的JavaScript（無(wú)異步），和寫(xiě)在HTML標(biāo)簽中的Style會(huì)阻塞頁(yè)面的渲染，因此CSS放在頁(yè)面頭部并使用Link方式引入，避免在HTML標(biāo)簽中寫(xiě)Style，JavaScript放在頁(yè)面尾
部或使用異步方式加載
首屏的快速顯示，可以大大提升用戶(hù)對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化
將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶(hù)需要時(shí)才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過(guò)Media Query加載
大型重資源頁(yè)面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁(yè)面。但Loading時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶(hù)流失
對(duì)用戶(hù)行為分析，可以在當(dāng)前頁(yè)加載下一頁(yè)資源，提升速度
a) 可感知Loading(如進(jìn)入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁(yè)）
圖片是最占流量的資源，因此盡量避免使用他，使用時(shí)選擇最合適的格式（實(shí)現(xiàn)需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時(shí)在代碼中用Srcset來(lái)按需顯示
PS：過(guò)度壓縮圖片大小影響圖片顯示效果
a) 使用智圖（ http://zhitu.isux.us/ ）
b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1. webP優(yōu)于JPG 2. PNG8優(yōu)于GIF)
e) 選擇合適的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機(jī)屏幕一般寬度））
Cookie會(huì)影響加載速度，所以靜態(tài)資源域名不使用Cookie
重定向會(huì)影響加載速度，所以在服務(wù)器正確設(shè)置避免重定向
第三方資源不可控會(huì)影響頁(yè)面的加載和顯示，因此要異步加載第三方資源
處理不當(dāng)會(huì)阻塞頁(yè)面加載、渲染，因此在使用時(shí)需當(dāng)注意
CSS寫(xiě)在頭部，JavaScript寫(xiě)在尾部或異步
避免圖片和iFrame等的空Src
空Src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率
重設(shè)圖片大小是指在頁(yè)面、CSS、JavaScript等中多次重置圖片大小，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能
DataURL圖片沒(méi)有使用圖片的壓縮算法文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長(zhǎng)
* 盡量避免寫(xiě)在HTML標(biāo)簽中寫(xiě)Style屬性
* 避免CSS表達(dá)式
CSS表達(dá)式的執(zhí)行需跳出CSS樹(shù)的渲染，因此請(qǐng)避免CSS表達(dá)式
* 移除空的CSS規(guī)則
空的CSS規(guī)則增加了CSS文件的大小，且影響CSS樹(shù)的執(zhí)行，所以需移除空的CSS規(guī)則
* 正確使用Display的屬性
Display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用
a) display:inline后不應(yīng)該再使用width、height、margin、padding以及float
b) display:inline-block后不應(yīng)該再使用float
c) display:block后不應(yīng)該再使用vertical-align
d) display:table-*后不應(yīng)該再使用margin或者float
* 不濫用Float
Float在渲染時(shí)計(jì)算量比較大，盡量減少使用
* 不濫用Web字體
Web字體需要下載，解析，重繪當(dāng)前頁(yè)面，盡量減少使用
* 不聲明過(guò)多的Font-size
過(guò)多的Font-size引發(fā)CSS樹(shù)的效率
* 值為0時(shí)不需要任何單位
為了瀏覽器的兼容性和性能，值為0時(shí)不要帶單位
* 標(biāo)準(zhǔn)化各種瀏覽器前綴
a) 無(wú)前綴應(yīng)放在最后
b) CSS動(dòng)畫(huà)只用 （-webkit- 無(wú)前綴）兩種即可
c) 其它前綴為 -webkit- -moz- -ms- 無(wú)前綴 四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）
* 避免讓選擇符看起來(lái)像正則表達(dá)式 高級(jí)選擇器執(zhí)行耗時(shí)長(zhǎng)且不易讀懂，避免使用
* 減少重繪和回流
a) 避免不必要的Dom操作
b) 盡量改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減少drawImage
* 緩存Dom選擇與計(jì)算
每次Dom選擇都要計(jì)算，緩存他
* 緩存列表.length
每次.length都要計(jì)算，用一個(gè)變量保存這個(gè)值
* 盡量使用事件代理，避免批量綁定事件
* 盡量使用ID選擇器
ID選擇器是最快的
* TOUCH事件優(yōu)化
使用touchstart、touchend代替click，因快影響速度快。但應(yīng)注意Touch響應(yīng)過(guò)快，易引發(fā)誤操作
* HTML使用Viewport
Viewport可以加速頁(yè)面的渲染，請(qǐng)使用以下代碼
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
* 減少Dom節(jié)點(diǎn)
Dom節(jié)點(diǎn)太多影響頁(yè)面的渲染，應(yīng)盡量減少Dom節(jié)點(diǎn)
* 動(dòng)畫(huà)優(yōu)化
a) 盡量使用CSS3動(dòng)畫(huà)
b) 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
c) 適當(dāng)使用Canvas動(dòng)畫(huà) 5個(gè)元素以?xún)?nèi)使用css動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)（iOS8可使用webGL）
* 高頻事件優(yōu)化
Touchmove、Scroll 事件可導(dǎo)致多次渲染
a) 使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓沟迷谡_的時(shí)間進(jìn)行渲染
b) 增加響應(yīng)變化的時(shí)間間隔，減少重繪次數(shù)
* GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來(lái)觸發(fā)GPU渲染，請(qǐng)合理使用（PS：過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加）
a、CSS動(dòng)畫(huà)更為流暢、但內(nèi)存占用過(guò)高，動(dòng)畫(huà)元素在5個(gè)以?xún)?nèi)更為推薦；
b、Canvas動(dòng)畫(huà)存在丟幀現(xiàn)象，這一現(xiàn)象在android中低端手機(jī)中表現(xiàn)更為明顯；
c、5個(gè)以?xún)?nèi)動(dòng)畫(huà)元素，選用CSS動(dòng)畫(huà)，80%的設(shè)備幀頻可達(dá)80以上。
移動(dòng)自適應(yīng)的話一般我用的話就是rem，通過(guò)rem單位配合媒體查詢(xún)來(lái)完成幾個(gè)屏幕的適配，以iphone6位標(biāo)準(zhǔn)，向上適配plus，向下適配5，不做過(guò)多的適配，有時(shí)候有要求的話也用js來(lái)控制rem的大小達(dá)到適配效果，rem是相對(duì)單位，相對(duì)html元素的font-size值的屬性，比如font-size:100px; 的話1rem就得100px，這樣我子需要通過(guò)改變html的font-size就可以達(dá)到適配效果
為動(dòng)畫(huà)DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個(gè)屬性都會(huì)開(kāi)啟GPU硬件加速模式，從而讓瀏覽器在渲染動(dòng)畫(huà)時(shí)從CPU轉(zhuǎn)向GPU
通過(guò)-webkit-transform:transition3d/translateZ開(kāi)啟GPU硬件加速之后，有些時(shí)候可能會(huì)導(dǎo)致瀏覽器頻繁閃爍或抖動(dòng)，可以嘗試以下辦法解決之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
通過(guò)-webkit-transform:transition3d/translateZ開(kāi)啟GPU硬件加速的適用范圍：
使用很多大尺寸圖片(尤其是PNG24圖)進(jìn)行動(dòng)畫(huà)的頁(yè)面。
頁(yè)面有很多大尺寸圖片并且進(jìn)行了css縮放處理，頁(yè)面可以滾動(dòng)時(shí)。
使用background-size:cover設(shè)置大尺寸背景圖，并且頁(yè)面可以滾動(dòng)時(shí)
編寫(xiě)大量DOM元素進(jìn)行CSS3動(dòng)畫(huà)時(shí)(transition/transform/keyframes/absTop&Left)
使用很多PNG圖片拼接成CSS Sprite時(shí)
可以使用after插入的形式將寬度設(shè)置為200%，然后通過(guò)css transfrom 的scale 縮放0.5倍；
使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通過(guò)快捷方式打開(kāi)時(shí)全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone會(huì)將看起來(lái)像電話號(hào)碼的數(shù)字添加電話連接，應(yīng)當(dāng)關(guān)閉
<meta name="format-detection" content="telephone=no" />
使用Media Queries適配對(duì)應(yīng)樣式
all所有設(shè)備；
screen 電腦顯示器；
print打印用紙或打印預(yù)覽視圖；
handheld便攜設(shè)備；
tv電視機(jī)類(lèi)型的設(shè)備；
speech語(yǔ)意和音頻盒成器；
braille盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備；
embossed盲文打印機(jī)；
projection各種投影設(shè)備；
tty使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。
width瀏覽器寬度；
height瀏覽器高度；
device-width設(shè)備屏幕分辨率的寬度值；
device-height設(shè)備屏幕分辨率的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。
@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}
寬度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}
#wrap img{
max-width:100%;
height:auto;
}
一個(gè)響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶(hù)端屏幕。css3引入了新的單位叫做rem,和em類(lèi)似但對(duì)于Html元素，rem更方便使用。em是相對(duì)于根元素的，需重置根元素字體大小：
html{font-size:100%;}
完成后，可以定義響應(yīng)式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}
ip6 2、ip6+ 3、nexus5 3
1) 自適應(yīng)方式
2) viewport方式
3) rem方式
4) scale()方式縮放
避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
為不支持viewport的IE Mobile設(shè)定寬度 <meta name="MobileOptimized" content="320" />
是否對(duì)手持設(shè)備友好 <meta name="HandheldFriendly" content="true" />
強(qiáng)制豎屏 <meta name="screen-orientation" content="portrait" />
強(qiáng)制全屏 <meta name="full-screen" content="yes" />
應(yīng)用模式 <meta name="browsermode" content="application" />
強(qiáng)制豎屏 <meta name="x5-orientation" content="portrait" />
強(qiáng)制全屏 <meta name="x5-fullscreen" content="yes" />
應(yīng)用模式 <meta name="x5-page-mode" content="app" />
開(kāi)啟極速模式 <meta name="renderer" content="webkit" />
啟動(dòng)webapp功能 刪除工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">
控制狀態(tài)欄顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
開(kāi)啟號(hào)碼或郵箱檢測(cè) <meta name="format-detection" content="telephone=no" />
添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png”>
重力感應(yīng) DeviceOrientation
手機(jī)加速傳感器 DeviceMotion
以Pjax方式實(shí)現(xiàn)SPA history.pushState history.replaceState 解決ajax不能后退前進(jìn)問(wèn)題
儲(chǔ)存
客戶(hù)端儲(chǔ)存：localStorage sessionStorage>只存在一個(gè)會(huì)話周期內(nèi)
跨域
postMessage
一般都是我前端這邊開(kāi)發(fā)好h5頁(yè)面給安卓和ios一個(gè)地址，然后告訴他們我有哪些方法，然后在做一些安卓ios的接口調(diào)用，安卓和ios會(huì)吧他們的方法提供一個(gè)接口給我，我直接調(diào)用就好，一般都是調(diào)用一些分享，跳轉(zhuǎn)之類(lèi)的方法
webapp部分基本都是我自己負(fù)責(zé)開(kāi)發(fā)，頁(yè)面交互都做，因?yàn)楫?dāng)時(shí)剛?cè)ス镜臅r(shí)候公司也剛往這個(gè)方向發(fā)展，讓我也一直就負(fù)責(zé)移動(dòng)業(yè)務(wù)這塊的內(nèi)容
用，bootstrap組要就是用一些他的樣式組件，還有最強(qiáng)大的就是他的刪格化系統(tǒng)了，做響應(yīng)式的網(wǎng)站，我們公司的官網(wǎng)就是用的bootstrap做的，后臺(tái)管理系統(tǒng)也是，當(dāng)時(shí)也是我負(fù)責(zé)給我們公司的后臺(tái)分享如何使用bootstrap的
發(fā)布會(huì)開(kāi)始之前的邀請(qǐng)函總能透露出很多內(nèi)容，或者說(shuō)我們總會(huì)特意解讀出很多內(nèi)容。nubia此前發(fā)出的3月26日智能手機(jī)新品發(fā)布會(huì)的邀請(qǐng)函很顯然再一次著重強(qiáng)調(diào)了其產(chǎn)品的拍照優(yōu)勢(shì)，從迷你腳架到各種鏡頭，順便還有一塊鋼板似乎暗示著新品的材質(zhì)。而在寫(xiě)有發(fā)布會(huì)具體時(shí)間地點(diǎn)的卡紙上，一個(gè)“9”字幾乎揭曉了所有的答案——“nubia Z9怎么也得在這場(chǎng)發(fā)布會(huì)中亮相了吧？”我相信大多數(shù)人都是這么想的，不過(guò)出乎意料的是nubia Z9 mini和nubia Z9 Max卻搶在nubia Z9之前先行發(fā)布了。或許這兩款手機(jī)的軟件功能可以看做是即將到來(lái)的nubia Z9的預(yù)覽，下面就一起來(lái)看看nubia Z9 mini這款小尺寸的新機(jī)，不過(guò)需要提前說(shuō)明的是，本次評(píng)測(cè)所用的產(chǎn)品還是工程機(jī)，其功能表現(xiàn)可能會(huì)與日后的正式零售版有所不同。
玩轉(zhuǎn)手機(jī)攝影 nubia Z9 mini新品首測(cè)
當(dāng)金屬成為智能手機(jī)中的一個(gè)新趨勢(shì)之后，我們就看到了越來(lái)越多的產(chǎn)品為自己增添了“金屬”的屬性。nubia Z9 mini在外觀設(shè)計(jì)上同樣下了不少功夫，整體的硬件配置與軟件功能相比前一代產(chǎn)品也做出了升級(jí)，而最終的重點(diǎn)，當(dāng)然還是為了打造一部?jī)?nèi)外兼修的拍照手機(jī)。
nubia Z9 mini
在評(píng)測(cè)開(kāi)始之前我們先對(duì)nubia Z9 mini有一個(gè)簡(jiǎn)單的了解，這款小尺寸的Z9系列新品采用了5英寸1080p顯示屏，這樣的大小對(duì)于大多數(shù)人來(lái)說(shuō)都是可以單手操作的尺寸。處理器方面，nubia Z9 mini選擇了驍龍615 64位8核處理器，輔以2GBRAM與16GB ROM，最大可以支持128GB microSD卡存儲(chǔ)擴(kuò)展，這對(duì)于照片的存儲(chǔ)倒是非常有必要的。另外，AndroidL正式發(fā)布之后，大部分新品都會(huì)將Android L作為出廠預(yù)裝的系統(tǒng)版本，nubia Z9 mini也同樣如此，搭載了基于Android L開(kāi)發(fā)的UI2.8，視覺(jué)上非常的扁平化。而在拍照方面，800萬(wàn)像素前置攝像頭與1600萬(wàn)像素主攝像頭在數(shù)字上看似中規(guī)中矩，但我們都知道nubia智能手機(jī)的拍照優(yōu)勢(shì)并不是單純的拼像素，而是結(jié)合其獨(dú)有的拍照功能創(chuàng)造不同的拍照體驗(yàn)。當(dāng)年拍星軌拍星云，如今拍極光，這些“功能體驗(yàn)”才是nubia機(jī)型拍照的靈魂所在。
nubia Z9 mini的外觀看起來(lái)中規(guī)中矩，但其實(shí)也有不少的工藝在里面。根據(jù)nubia官方所說(shuō)，為了保持邊框整體外觀的高度一致性與結(jié)構(gòu)強(qiáng)度，nubia將重430克、厚7mm的LR30型鋁板直接送入法蘭克CNC機(jī)床進(jìn)行銑削，定制出多達(dá)30種T型刀、R型圓角刀，只為追求極致角度，達(dá)到完美體驗(yàn)。同時(shí)更是結(jié)合機(jī)械打磨以及手工打磨的優(yōu)點(diǎn)，讓金屬弧面達(dá)到鏡光效果。
前置800萬(wàn)像素?cái)z像頭
HOME鍵仍舊是標(biāo)志性的小紅圈
經(jīng)過(guò)了獨(dú)道工序而誕生的nubia Z9 mini在給人的第一觀感是光滑，除了前后覆蓋的玻璃之外，邊框的手感也不會(huì)覺(jué)得生硬，與前后的玻璃面板很好的融合在一起。黑色面板的息屏效果不錯(cuò)屏幕本身與四周的邊框難以區(qū)分，幾年前我們一直在說(shuō)所謂的“息屏美學(xué)”，幾年之后，幾乎每一部中高端的產(chǎn)品息屏都可以很美。屏幕下方Home鍵的小紅圈仍舊是nubia的標(biāo)志，左右的返回鍵與選項(xiàng)鍵也仍舊是隱藏式設(shè)計(jì)，用戶(hù)可以調(diào)整這兩個(gè)按鍵燈的亮度，也可以選擇按鍵燈是在觸摸時(shí)亮起、或是始終保持熄滅狀態(tài)。
右側(cè)按鍵與頂部耳機(jī)孔
底部數(shù)據(jù)接口與左側(cè)雙nanoSIM卡槽
金屬邊框的手感就如同我們前文所說(shuō)，并不會(huì)顯得生澀，略微有一些磨砂質(zhì)感，也增大摩擦力，不用擔(dān)心手機(jī)在手中滑落。這四個(gè)側(cè)邊的按鍵與接口布局還算合理，右側(cè)的電源鍵與音量鍵，底部的數(shù)據(jù)接口與揚(yáng)聲器，頂部耳機(jī)孔，左側(cè)SIM卡槽，每一個(gè)側(cè)邊都有其按鍵或接口，因此整體給人的感覺(jué)比較均衡。nubia Z9 mini仍舊是雙卡雙待的4G全網(wǎng)通機(jī)型，一個(gè)卡槽可以放下兩個(gè)nanoSIM卡，也是非常的節(jié)省空間。
后蓋上的紋理很細(xì)密
1600萬(wàn)像素主攝像頭
nubia Z9 mini的后蓋附有一層玻璃，在光線的反射下能夠看清后蓋上細(xì)密的紋理。1600萬(wàn)像素主攝像頭周?chē)瑯影蝗Ρ孀R(shí)度極高的紅圈，也算是nubia的特色。
打開(kāi)后蓋可以看到microSD卡槽
nubia Z9 mini可以更換多種個(gè)性后蓋
nubia Z9 mini的后蓋可以打開(kāi)，不過(guò)并不能更換電池，好在產(chǎn)品配備的2900毫安時(shí)電池也算夠用。這個(gè)可以更換的后蓋其實(shí)為定制型后殼提供了發(fā)揮的空間，巴拉圭蘇木、黑珍珠、牛仔布等特色后蓋都可以替代現(xiàn)有的標(biāo)配后蓋。同時(shí)打開(kāi)后蓋后可以看到一個(gè)microSD卡槽，因?yàn)槠綍r(shí)我們不會(huì)頻繁的插拔microSD卡，所以講卡槽設(shè)計(jì)在后蓋內(nèi)部不僅精簡(jiǎn)了邊框上的卡槽設(shè)計(jì)，同時(shí)也不會(huì)對(duì)用戶(hù)造成不便。
nubia Z9 mini搭載了基于AndroidL開(kāi)發(fā)的UI2.8，整體都是扁平化的風(fēng)格，界面非常簡(jiǎn)潔，但是操作形式對(duì)于新用戶(hù)或老用戶(hù)來(lái)說(shuō)都還是非常好上手的。解鎖的形式如下圖所示，在解鎖界面可以看到三個(gè)常用圖標(biāo)，向該圖標(biāo)滑動(dòng)即可解鎖或進(jìn)入對(duì)應(yīng)的功能界面，而主界面也是非常常見(jiàn)的圖標(biāo)排列形式，不過(guò)圖標(biāo)風(fēng)格都是偏向于扁平化的設(shè)計(jì)。
主界面與解鎖界面
移動(dòng)圖標(biāo)的位置非常方便
nubia的UI中對(duì)于圖標(biāo)的整理還是非常便利的，一般來(lái)說(shuō)如果我們想將一個(gè)圖標(biāo)移動(dòng)到另一屏，需要長(zhǎng)按圖標(biāo)進(jìn)行拖動(dòng)，操作起來(lái)非常不順手。而nubia Z9 mini則可以讓我們將想要移動(dòng)位置的圖標(biāo)先添加到屏幕底部，隨后切換到另一屏，再點(diǎn)擊圖標(biāo)將其放置在當(dāng)前這一屏中，省去了麻煩的拖動(dòng)環(huán)節(jié)。
通知欄設(shè)計(jì)簡(jiǎn)潔
下拉通知欄同樣是簡(jiǎn)潔的風(fēng)格，單次下拉只會(huì)占屏幕一般的位置，再次下滑會(huì)出現(xiàn)更多的功能菜單。白底與圖標(biāo)的紅色輪廓同樣很有nubia特色，操作起來(lái)還算便捷。
“易模式”可以根據(jù)需求在桌面上添加應(yīng)用圖標(biāo)
除了常規(guī)的桌面外，nubia Z9 mini也有“易模式”，更適合老年人或是入門(mén)級(jí)用戶(hù)使用。界面中基本上只保留了最常用的功能圖標(biāo)，而且圖標(biāo)更大，不容易誤觸。除此之外，撥號(hào)界面的撥號(hào)盤(pán)也比標(biāo)準(zhǔn)桌面時(shí)要大一些，幾乎占滿了整個(gè)屏幕，更方便老年人操作。另外，用戶(hù)還可以根據(jù)實(shí)際的使用需求在這個(gè)界面中加入其它應(yīng)用圖標(biāo)。
可調(diào)節(jié)的屏幕顯示效果與呼吸燈亮度
屏幕與按鍵同樣可以根據(jù)用戶(hù)的需求進(jìn)行調(diào)整。屏幕可以針對(duì)飽和度和色調(diào)進(jìn)行不同風(fēng)格的調(diào)整，可以偏暖或偏冷，也可以讓色彩更艷麗；而呼吸燈不僅可以調(diào)整是否亮起，還可以調(diào)整其亮度，同樣是比較人性化的細(xì)節(jié)。
大量的在線免費(fèi)主題
Android設(shè)備的開(kāi)放與自由也是一大亮點(diǎn)，所以在nubia Z9 mini中，我們也可以看到官方的主題商店。不僅可以下載主題，還可以更換壁紙與鈴聲。在線主題都是免費(fèi)的，用戶(hù)可以按照自己的心情隨時(shí)下載最新主題。
拍照是nubia Z9 mini的強(qiáng)項(xiàng)，所以首先我們先來(lái)了解一下這款手機(jī)的諸多拍照功能。當(dāng)然，就和nubia前幾代拍照機(jī)型一樣，其中的特色功能更適合那些專(zhuān)業(yè)的攝影愛(ài)好者，而對(duì)于大多數(shù)普通用戶(hù)來(lái)說(shuō)，nubia Z9 mini中的標(biāo)準(zhǔn)相機(jī)也能滿足他們的日常拍攝需求。
標(biāo)準(zhǔn)相機(jī)的設(shè)置選項(xiàng)與專(zhuān)業(yè)模式下的參數(shù)調(diào)整
在標(biāo)準(zhǔn)相機(jī)中，菜單選項(xiàng)看似復(fù)雜，但其實(shí)很多功能我們只要保持開(kāi)啟或關(guān)閉就OK了。比如人臉識(shí)別、位置標(biāo)簽等等，我覺(jué)得大部分用戶(hù)不會(huì)非常頻繁的調(diào)整這類(lèi)選項(xiàng)，所以我們依照自己的使用習(xí)慣選擇開(kāi)啟或關(guān)閉就可以。當(dāng)然，即便對(duì)這些功能做出調(diào)整，標(biāo)準(zhǔn)相機(jī)整體的拍攝模式也都還是偏自動(dòng)化的。如果你想要一些更“手動(dòng)”的操作，可以點(diǎn)擊取景界面右下角的“專(zhuān)業(yè)”，這時(shí)候會(huì)出現(xiàn)更多的細(xì)節(jié)選項(xiàng)。ISO、白平衡、曝光補(bǔ)償、快門(mén)速度，這些都可以在“專(zhuān)業(yè)”模式下通過(guò)手動(dòng)進(jìn)行調(diào)整。在對(duì)某一項(xiàng)參數(shù)進(jìn)行設(shè)置的時(shí)候，其他參數(shù)的設(shè)置選項(xiàng)會(huì)暫時(shí)隱藏，這樣一來(lái)我們可以很明確的看出調(diào)整參數(shù)時(shí)預(yù)覽界面的畫(huà)面效果變化。
“相機(jī)家族”，實(shí)時(shí)特效可添加實(shí)時(shí)呈現(xiàn)的濾鏡
另外，在nubia Z9 mini中，相機(jī)變成了一個(gè)“家族”。在拍照界面的最左側(cè)向右滑動(dòng)屏幕、或是在手機(jī)主界面最左側(cè)一屏，都能看到“相機(jī)家族”的幾個(gè)圖標(biāo)。這其中包括了前文的標(biāo)準(zhǔn)相機(jī)，與星軌、光繪、電子光圈、實(shí)時(shí)特效、全景、慢門(mén)、視頻這幾類(lèi)。
電子光圈與光繪模式示意
慢門(mén)與星軌模式示意
全景功能我們?cè)谶@里不做贅述，實(shí)時(shí)特效的功能類(lèi)似于照片中實(shí)時(shí)添加的濾鏡，是一種所見(jiàn)即所得模式，這種功能還算常見(jiàn)。而星軌、光繪可以算是nubia的特色，將原本需要相機(jī)實(shí)現(xiàn)的拍照體驗(yàn)移植到了手機(jī)中。在弱光環(huán)境下通過(guò)光源進(jìn)行繪畫(huà)，或是長(zhǎng)時(shí)間拍攝出星軌的軌跡，這些都能夠通過(guò)nubia Z9 mini實(shí)現(xiàn)，當(dāng)然，上一代的nubia Z7系列也沒(méi)有問(wèn)題。其他功能我們通過(guò)截圖中的介紹可以了解一二，不過(guò)這些功能更適合專(zhuān)業(yè)的手機(jī)攝影愛(ài)好者，同時(shí)在拍攝時(shí)你也需要準(zhǔn)備一個(gè)專(zhuān)門(mén)供手機(jī)使用的腳架。以電子光圈為例，這類(lèi)拍攝需要通過(guò)長(zhǎng)時(shí)間曝光來(lái)彌補(bǔ)手機(jī)拍照中的不足，如果手持手機(jī)則可能出現(xiàn)抖動(dòng)、拍虛照片，而腳架能夠保證照片的清晰畫(huà)質(zhì)，同時(shí)結(jié)合其特色功能以獲得更好的拍照效果。
nubia Z9 mini樣張：
nubia Z9 mini樣張
nubia Z9 mini樣張
nubia Z9 mini樣張
nubia Z9 mini樣張
光繪樣張
慢門(mén)樣張
最后還是來(lái)看一下nubia Z9 mini的跑分表現(xiàn)，因?yàn)槭枪こ虡訖C(jī)，所以性能并不能代表最終的上市版本，在這里僅作參考使用。nubia Z9 mini配備了5英寸1080p顯示屏，驍龍615 64位8核處理器，輔以2GBRAM與16GB ROM，整體配置不算頂級(jí)旗艦，畢竟如其標(biāo)題所示，它是Z9系列的一部分，但這一系列的主角還是日后將會(huì)發(fā)布的nubia Z9。
CPU-Z檢測(cè)出的機(jī)身信息
AnTuTu 5.0在性能測(cè)試中有兩個(gè)變動(dòng)，其一是安兔兔5.0增加了一個(gè)“CPU(單線程)”的項(xiàng)目，在該項(xiàng)目下同CPU項(xiàng)一樣分為“CPU整數(shù)”和“CPU浮點(diǎn)”，可以說(shuō)這是針對(duì)移動(dòng)平臺(tái)單線程的首例，這也同樣突出了核不在多這樣概念。除此之外，測(cè)試3D處理器能力的場(chǎng)景也有所更換，對(duì)于GPU的壓力更大，這也是因?yàn)槟壳疤幚砥鞯腉PU不斷提升，以往的3D場(chǎng)景不能將GPU之間的性能差異進(jìn)行明顯劃分。
AnTuTu測(cè)試得分31025，處于主流水平
Vellamo是由Qualcomm（高通公司）開(kāi)發(fā)的一個(gè)基準(zhǔn)測(cè)試應(yīng)用（類(lèi)似于Neocore），它可以讓你對(duì)手機(jī)瀏覽器的性能及穩(wěn)定性進(jìn)行測(cè)試，包括像Java腳本性能、渲染、聯(lián)網(wǎng)和用戶(hù)界面等。該工具的結(jié)果同樣包括多個(gè)子項(xiàng)，但我們只取總成績(jī)，分?jǐn)?shù)越高則表明手機(jī)對(duì)瀏覽器的優(yōu)化程度越高，網(wǎng)頁(yè)瀏覽體驗(yàn)更好。
vellamo測(cè)試結(jié)果同樣位居主流
Vellamo作為一種手機(jī)網(wǎng)頁(yè)標(biāo)尺工具，如今已擴(kuò)展至包括兩個(gè)主要模塊。HTML5模塊可用來(lái)評(píng)估移動(dòng)網(wǎng)頁(yè)瀏覽器性能，而Metal模塊可對(duì)移動(dòng)處理器的CPU子系統(tǒng)性能進(jìn)行測(cè)量。測(cè)試套件點(diǎn)擊即用，方便快捷，分模塊進(jìn)行管理，Vellamo可對(duì)滾動(dòng)縮放，3D圖形，視頻性能，內(nèi)存讀寫(xiě)，帶寬峰值性能等諸多方面進(jìn)行評(píng)估。
nubia Z9 mini或許不能算是Z9系列中的“主力”，但卻有著更廣的用戶(hù)群。除卻外觀尺寸上的平易近人之外，價(jià)位對(duì)于普通用戶(hù)來(lái)說(shuō)也頗有親和力。整體來(lái)看，這款產(chǎn)品有著精致的外觀工藝，出色的系統(tǒng)體驗(yàn)，創(chuàng)新的拍照玩法，以及主流的性能表現(xiàn)。作為一款主打趣味拍照的產(chǎn)品，它能提供的不是像素?cái)?shù)這種枯燥乏味的數(shù)字攀比，而是其他產(chǎn)品所不能提供的創(chuàng)意拍照功能，滿足不同場(chǎng)景不同情境下的專(zhuān)業(yè)手機(jī)攝影需求。nubia Z9 mini再一次凸顯了nubia對(duì)于將單反功能移植到手機(jī)拍照中的執(zhí)著，從一款創(chuàng)意拍照機(jī)型的角度來(lái)說(shuō)，它確實(shí)是一款非常有意思的產(chǎn)品。
nubia Z9 mini（全網(wǎng)通）詳細(xì)參數(shù)
| 網(wǎng)絡(luò) |
|
|---|
| 硬件 |
|
|---|
| 攝像頭 |
|
|---|
| 外觀 |
|
|---|
| 服務(wù)與支持 |
|
|---|
| 手機(jī)附件 |
|
|---|
| 保修信息 |
|
|---|
*本信息來(lái)源于ZOL產(chǎn)品庫(kù)
果圖非常漂亮，制作的方法也非常獨(dú)特。過(guò)程：先打上喜歡的文字或圖形，然后把輪廓轉(zhuǎn)為路徑，新建幾個(gè)圖層，分別用不同的筆刷描邊路徑做出發(fā)光的小顆粒及發(fā)光效果，后期再加強(qiáng)局部高光即可。
最終效果
1、新建大小自定的文檔，在背景層上面新建一個(gè)圖層，命名為“漸變”。設(shè)置前景色為＃724242，背景色＃3c1a1a，然后，創(chuàng)建一個(gè)徑向漸變，從文檔的中心拖到其中一個(gè)角落。
2、雙擊“漸變”層添加一個(gè)漸變疊加。更改混合模式為“疊加”，不透明度80％ ，角度45度，縮放到150％ 。然后，單擊漸變對(duì)話框來(lái)創(chuàng)建它。
使用左側(cè)顏色＃DC4800和右側(cè)顏色＃430401來(lái)創(chuàng)建漸變。
3、轉(zhuǎn)到濾鏡庫(kù)>素描>水彩畫(huà)紙，數(shù)值設(shè)置如圖。
4、這將添加一些好看的火花到背景上。
5、新建黑色文字。使用粗形的字體，大小為500像素。
6、雙擊文字層，添加一個(gè)外發(fā)光。改變混合模式為“亮光”，顏色＃a6dc6b，大小10，范圍100％。
7、文字圖層的填充值改為0％。這時(shí)文字會(huì)有一個(gè)非常微妙的光暈效果。
8、右鍵單擊文字層，選擇創(chuàng)建工作路徑。
9、從網(wǎng)上下載鉆石火花筆刷，并到你的畫(huà)筆面板（窗口>畫(huà)筆）加載它。做下一個(gè)步驟之前，請(qǐng)先選中這個(gè)筆刷效果。
10、在所有圖層上方新建一個(gè)圖層，命名為“火花”。設(shè)置前景色為白色，并挑選直接選擇工具。
11、右鍵單擊路徑上，選擇描邊路徑。
12、從工具下拉菜單選擇畫(huà)筆，并勾選模擬壓力框。
13、這將打造火花筆刷的文字路徑，按Enter鍵擺脫路徑。
14、雙擊“火花”圖層應(yīng)用內(nèi)外發(fā)光的圖層樣式。外發(fā)光：改變混合模式為“顏色減淡”，顏色白色。
15、內(nèi)發(fā)光：只改變顏色為＃f4edd3。
16、這將添加一個(gè)簡(jiǎn)單的發(fā)光火花。把“火花”圖層的填充值改為0％。
17、選擇一個(gè)軟刷，更改設(shè)置如下。畫(huà)筆筆尖形狀：
形狀動(dòng)態(tài)：請(qǐng)務(wù)必選擇大小抖動(dòng)-控制下拉菜單中的鋼筆壓力。
18、再次創(chuàng)建工作路徑（右鍵點(diǎn)擊文字圖層>創(chuàng)建工作路徑），在所有圖層上方創(chuàng)建一個(gè)新層，命名為“發(fā)光”，設(shè)置前景色＃f8ff99，右單擊路徑上選擇描邊路徑，用刷子，然后按Enter鍵。
19、雙擊“發(fā)光”層添加更多的圖層樣式。外發(fā)光：改變混合模式為“柔光”，顏色白色，大小2。
內(nèi)發(fā)光：改變混合模式為“線性光”，顏色＃ffb8b8，來(lái)源為中心，大小2。
20、更改“發(fā)光”圖層的混合模式為“疊加”。文本現(xiàn)在挺亮了。
21、再次，選擇一個(gè)軟刷，數(shù)值設(shè)置如下。
畫(huà)筆筆尖形狀。
形狀動(dòng)態(tài)：請(qǐng)務(wù)必選擇大小抖動(dòng)-控制下拉菜單中的鋼筆壓力。
傳遞：
22、創(chuàng)建工作路徑，在所有圖層之上創(chuàng)建一個(gè)新層，命名為“顏色”，改變其混合模式為“顏色”，設(shè)置前景色＃a7a400，設(shè)置描邊路徑，用刷子，然后按Enter鍵。這將添加上一個(gè)漂亮的綠色光芒。
23、設(shè)置前景色＃724242，背景色＃3c1a1a，然后選擇“漸變”層。
24、轉(zhuǎn)到濾鏡庫(kù)>畫(huà)筆描邊>噴色描邊，并設(shè)置如下。
25、背景的大火花會(huì)消失，留下一個(gè)平滑的噴濺效果。
26、在所有圖層之上新建一個(gè)圖層，命名為“雪發(fā)光”，然后雙擊它應(yīng)用一些更加“發(fā)光”的圖層樣式。
27、外發(fā)光：改變混合模式為“亮光”，顏色白色，大小2，顏色設(shè)置如下。
內(nèi)發(fā)光：改變混合模式為“線性光”，顏色＃ffe400，來(lái)源為中心，大小2。
28、設(shè)置前景色為白色，使用最后創(chuàng)建的刷（步驟5）畫(huà)一些亮光。您可以使用“橡皮擦工具”，消除不想要的區(qū)域。
最終效果：
==============================
公眾號(hào)：春樹(shù)鎮(zhèn)
研究討論：互聯(lián)網(wǎng)技術(shù)，php開(kāi)發(fā)，網(wǎng)站建議，app開(kāi)發(fā)，html5開(kāi)發(fā)，設(shè)計(jì)，小說(shuō)，電影，美食
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
