中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

史上最詳細(xì)的iPhoneX視覺(jué)分析。

從iPhone6發(fā)布以后，果粉們就開(kāi)始期待這款十周年紀(jì)念版的iPhoneX，究其原因無(wú)非是蘋(píng)果在新品iPhone6上的外觀、技術(shù)上太保守了，外觀設(shè)計(jì)用了三年。 從果不其然，蘋(píng)果公司還是聽(tīng)取了用戶的聲音，帶來(lái)了蘋(píng)果史上技術(shù)最大程度的突破。iPhoneX.由于機(jī)型外觀做了重大改變。那么隨之UI界面設(shè)計(jì)和交互細(xì)節(jié)也會(huì)有非常多的改變。做為設(shè)計(jì)師我們需要緊跟這些變化。那么，這些改變對(duì)于UI設(shè)計(jì)師的有哪些影響了？

外觀變化

變化1：取消了實(shí)體的 Home 鍵

X 讀作「10 / ten」，這是第一款「全面屏」iPhone，也許是受小米的刺激，推出了這款全面屏幕也不一定。

變化2：雙面玻璃設(shè)計(jì)的回歸

還記得以前iPhone4驚艷的雙面玻璃嗎，這次蘋(píng)果又回歸這種設(shè)計(jì)的。iPhoneX采用了前后玻璃 + 不銹鋼邊框的外觀，5.8寸的屏幕，因?yàn)槭褂昧巳嫫聊?，所以屏幕?8Plus 更大，但機(jī)身確是小于8 Plus的。

硬件變化

變化1：屏幕

首次使用OLED 屏幕，分辨率達(dá)到2436×1125，PPI達(dá)到驚人的458ppi

所以，帶來(lái)的視覺(jué)效果會(huì)更加精細(xì)。

變化2：處理器

搭載6核A11仿生處理器，這個(gè)強(qiáng)大的處理器可以支持更強(qiáng)勁的游戲效果。

變化 ： 攝像頭

前置攝像頭升級(jí)為原深感攝像頭，也能拍景深照片，后置豎排雙攝像頭，都有光學(xué)防抖，人像模式加入專(zhuān)業(yè)打光功能人像光效；

這個(gè)攝像頭還能識(shí)別面部表情做動(dòng)態(tài) Emoji，蘋(píng)果官方叫做動(dòng)話表情。

變化4：充電

iPhoneX比iPhone續(xù)航提升了2個(gè)小時(shí)，支持無(wú)線充電，發(fā)布了可同時(shí)充 3個(gè)設(shè)備的 AirPower 充電枕

交互變化

變化1：臉部識(shí)別解鎖

沒(méi)有 Touch ID，全新 Face ID（面容識(shí)別）以后用戶可以刷臉就能解鎖；

變化2：返回主屏幕的操作

去掉了home鍵，當(dāng)用戶在一個(gè)應(yīng)用內(nèi)部時(shí)，從底部向上輕掃，即可返回主屏幕。

變化3：激活多任務(wù)操作

當(dāng)用戶需要啟用多任務(wù)時(shí)，只需屏幕向上輕掃并停頓一下，就能激活多任務(wù)界面。

變化4：激活控制中心

之前打開(kāi)控制中心的手勢(shì)是從上往下拉出，現(xiàn)在則更改為從屏幕的右上角向下輕掃。

變化5：激活Siri

沒(méi)有了實(shí)體的Home鍵，用戶想要激活 Siri，變?yōu)榱碎L(zhǎng)按側(cè)邊的實(shí)體鍵。

變化6：激活A(yù)pple Pay

用戶打開(kāi)Apple Pay 的式更改為連按兩下側(cè)邊按鍵。

設(shè)計(jì)總結(jié)

因?yàn)閷?shí)體的Home鍵的取消，交互變化是巨大的。更多的運(yùn)用到了掃屏幕這個(gè)操作，以及側(cè)邊實(shí)體按鍵的組合運(yùn)用。

界面設(shè)計(jì)

很多設(shè)計(jì)師最關(guān)注的就是這個(gè)部分了。新的硬件出來(lái)，到底對(duì)原來(lái)設(shè)計(jì)有多大影響。我的答案是有影響，但是影響沒(méi)有你想的那么大。

變化1：頂部標(biāo)簽欄的高度

iPhoneX最顯眼的莫過(guò)于那個(gè)劉海頭了。因?yàn)閯⒑ｎ^的存在，遮蔽了原有的電池狀態(tài)欄，包括頂部的導(dǎo)航欄部分的視覺(jué)面積。

所以從iOS11開(kāi)始，導(dǎo)航欄中間的文字，被挪到下面去了。用了更大更粗的字體顯示。所以這個(gè)視覺(jué)設(shè)計(jì)風(fēng)格的更替還是來(lái)源于硬件的變化。

因?yàn)橛羞@個(gè)小劉海的存在，為了文字不被遮蔽，所以導(dǎo)航欄的高度也會(huì)相應(yīng)被拉高。

變化2：頂部標(biāo)簽欄的文字

雖然官方的模板標(biāo)題字是如此大，但是我預(yù)言在國(guó)內(nèi)，設(shè)計(jì)師會(huì)根據(jù)具體情況選擇小點(diǎn)的字號(hào)。因?yàn)閲?guó)內(nèi)還是喜歡高信息密度的設(shè)計(jì)。這個(gè)道理就好像安卓的Material design，人人叫好，但是國(guó)內(nèi)沒(méi)幾個(gè)設(shè)計(jì)師愿意去使用這個(gè)設(shè)計(jì)語(yǔ)言去設(shè)計(jì)應(yīng)用，因?yàn)樾畔⒚芏忍土恕?/p>

如下圖使用Material design設(shè)計(jì)語(yǔ)言的淘寶和目前的淘寶，哪個(gè)信息密度高？所以淘寶首頁(yè)寸土寸金的首屏，不會(huì)為了放幾個(gè)字浪費(fèi)了這么一大塊面積。

變化3：底部標(biāo)簽欄的圖標(biāo)設(shè)計(jì)

底部導(dǎo)航欄圖標(biāo)，過(guò)去的做法是當(dāng)前激活模塊的圖標(biāo)為剪影風(fēng)格，其他圖標(biāo)為線性風(fēng)格。設(shè)計(jì)師需要做兩套圖標(biāo)。分別是一套剪影，一套線性。而現(xiàn)在統(tǒng)一為剪影，而當(dāng)前激活模塊的圖標(biāo)使用平鋪色代表激活。

底部標(biāo)簽欄的高度也加大，為了適應(yīng)新的硬件屏幕設(shè)計(jì)，視覺(jué)區(qū)域也相應(yīng)加大。

這樣表面看起來(lái)是減少了設(shè)計(jì)師的負(fù)擔(dān)，不過(guò)我認(rèn)為對(duì)設(shè)計(jì)師的圖標(biāo)設(shè)計(jì)基本功提出了更高的要求。畢竟形態(tài)變化少了，需要在剪影本身上下的功夫需要更多。所以對(duì)圖標(biāo)形體的設(shè)計(jì)練習(xí)依然不可少。這是我之前帶學(xué)生做的剪影線性的切換練習(xí)。

變化4：留白間距的控制

對(duì)于新的iPhoneX，因?yàn)樯舷露嗔艘粋€(gè)圓角，且頭部多了一個(gè)小劉海，因?yàn)檫@些硬件的差異，導(dǎo)致界面設(shè)計(jì)需要考慮到這些因素。所以無(wú)論橫豎屏，都需要考慮兩邊留白的間距問(wèn)題，需要留出足夠的間距，保證元素不被遮蔽。

設(shè)計(jì)的適配

過(guò)去我們?cè)O(shè)計(jì)頁(yè)面，采用的方法是基于iPhone7的2X倍率進(jìn)行設(shè)計(jì)，以2X的基準(zhǔn)做設(shè)計(jì)稿，也就是750×1334。然后切圖輸出2X、3X的圖片資源給開(kāi)發(fā)。如果不知道倍率是什么意思?？梢匀タ次业腢I設(shè)計(jì)師《術(shù)與道移動(dòng)應(yīng)用設(shè)計(jì)必修課》，這是2016年全年銷(xiāo)量第一的UI設(shè)計(jì)書(shū)籍。新的iPhoneX分辨率是1125×2436。

從頁(yè)面的寬高比例來(lái)說(shuō)：

• 新的iPhoneX寬度1125/3=375，而iPhone7的寬度750/2=375，兩個(gè)的寬度一致，
• 新的iPhoneX高度2436/3=812，而iPhone7的高度1334/2=667，新的iPhoneX是比iPhone7要長(zhǎng)一截。

所以從頁(yè)面視覺(jué)來(lái)看，我們依然采用老辦法，從2X的iPhone7做為基準(zhǔn)去做一稿設(shè)計(jì)，唯一變化的是可能我們需要采用更高的導(dǎo)航欄，更高的底部標(biāo)簽欄。

原有的頁(yè)面相當(dāng)于現(xiàn)在的頁(yè)面設(shè)計(jì)，信息密度可能降低了。因?yàn)閮?nèi)容顯示區(qū)域變少了點(diǎn)。

設(shè)計(jì)的測(cè)試

雖然界面設(shè)計(jì)的流程依然沒(méi)有變化。但是因?yàn)橛辛诵⒑５某霈F(xiàn)，設(shè)計(jì)師需要付出更多的時(shí)間來(lái)測(cè)試頁(yè)面，看看在橫豎屏切換的時(shí)候，有沒(méi)有元素遮蔽的現(xiàn)象。

源文件下載：

最后更新一下我從國(guó)外網(wǎng)站找到的最新iPhoneX的PSD模板，下載地址：https://pan.baidu.com/s/1bplNkpp（密碼:?53sk）

作者：余振華（網(wǎng)名：風(fēng)尾竹），UI設(shè)計(jì)師，站酷推薦設(shè)計(jì)師，微信公眾號(hào)“聊設(shè)計(jì)”（ID： liaosheji2010），歡迎交流

本文由 @余振華 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自蘋(píng)果官網(wǎng)