區(qū)塊鏈技術(shù)與電子商務(wù)應(yīng)用 課件 【ch01】走進(jìn)ui世界

走進(jìn)UI世界第一章新工科建設(shè)·應(yīng)用型本科規(guī)劃教材UI設(shè)計(jì)實(shí)戰(zhàn)認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)0101認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)UIGuIUI是用戶界面(UserInterface)的簡(jiǎn)稱。它是一個(gè)比較廣泛的概念，指人-機(jī)互動(dòng)過(guò)程中的各種操作和反饋界面，也可以理解為產(chǎn)品中一切可視化操作界面。完成這些界面視覺(jué)效果設(shè)計(jì)的人稱為UI設(shè)計(jì)師。S平臺(tái)App產(chǎn)品效果展示如圖1.1圖1.2圖1.3所示;Android平臺(tái)App產(chǎn)品效果展示:如圖1.4、圖1.5、圖1.6所示GUI是圖形用戶界面(GraphicalUserintertace)的簡(jiǎn)稱，又稱圖形用戶接口。采用圖形方式顯示計(jì)算機(jī)操作用戶界面的人稱為GUI設(shè)計(jì)師。因?yàn)橐苿?dòng)端會(huì)有大量圖形用戶界面設(shè)計(jì)，所以一般在公司中不會(huì)將UI和GU區(qū)分得太清楚。01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)HUIWUIHUI是手持設(shè)備用戶界面(HandsetUserinterface)的簡(jiǎn)稱，嚴(yán)格來(lái)說(shuō)，智能手機(jī)也屬于手持設(shè)備。設(shè)計(jì)手持設(shè)備界面的人稱為HUI設(shè)計(jì)師。產(chǎn)品效果如圖1.7、圖1.8所示。WUI是網(wǎng)頁(yè)用戶界面(WebUserInterface)的簡(jiǎn)稱。從事PC端網(wǎng)頁(yè)設(shè)計(jì)的人稱為WUI設(shè)計(jì)師。產(chǎn)品效果如圖1.9、圖1.10所示。01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)在上述各種界面的展示中，我們會(huì)發(fā)現(xiàn)UI設(shè)計(jì)師、GUI設(shè)計(jì)師、HUI設(shè)計(jì)師和WUI設(shè)計(jì)師最終的產(chǎn)出物絕大部分是針對(duì)移動(dòng)端或互聯(lián)網(wǎng)產(chǎn)品的視覺(jué)設(shè)計(jì)，對(duì)界面表現(xiàn)有較高要求。所以一般對(duì)上述崗位并不會(huì)做太嚴(yán)格的區(qū)分，都統(tǒng)稱為UI設(shè)計(jì)師。01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)UEUED用戶體驗(yàn)(UserExperience)是指用戶在使用產(chǎn)品過(guò)程中的主觀感受用戶體驗(yàn)是用戶對(duì)產(chǎn)品產(chǎn)生的整體使用感受，包括受品牌、用戶個(gè)人使用經(jīng)驗(yàn)的影響。所以不要理解用戶體驗(yàn)設(shè)計(jì)只是與用戶界面相關(guān)，那只是其中的一部分。用戶體驗(yàn)設(shè)計(jì)(UserExperienceDesign，也稱為UXD)是以用戶為中心的一種設(shè)計(jì)手段，以用戶需求為目標(biāo)而進(jìn)行的設(shè)計(jì)。設(shè)計(jì)過(guò)程注重以用戶為中心，用戶體驗(yàn)的概念從開(kāi)發(fā)的最早期就開(kāi)始進(jìn)入整個(gè)流程，并且貫穿始終。用戶體驗(yàn)雖然是個(gè)人的感受，但共性的體驗(yàn)也可以通過(guò)良好的設(shè)計(jì)得到提升。01認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)UCD當(dāng)然UCD(UserCenteredDesign)是以用戶為中心的設(shè)計(jì)，是在設(shè)計(jì)過(guò)程中以用戶體驗(yàn)為設(shè)計(jì)決策的中心，強(qiáng)調(diào)用戶優(yōu)先的設(shè)計(jì)模式。UCD是一種設(shè)計(jì)思維，它強(qiáng)調(diào)在設(shè)計(jì)產(chǎn)品過(guò)程中，從用戶角度出發(fā)進(jìn)行設(shè)計(jì)，秉承用戶優(yōu)先。我們說(shuō)UCD強(qiáng)調(diào)用戶優(yōu)先，并不代表是最合適的，因?yàn)樵诋a(chǎn)品不同階段需要考慮的優(yōu)先級(jí)也是不同的。UI相關(guān)概念0202UI相關(guān)概念英寸(Inch)例如英寸是常用的長(zhǎng)度單位。雖然英寸是英制單位，但是很多地方都在廣泛使用。例如，大家在購(gòu)買電視機(jī)的時(shí)候都會(huì)說(shuō)買多少寸的電視機(jī)，這里的“寸”就是“英寸”是指屏幕對(duì)角線的長(zhǎng)度。手機(jī)屏幕也延續(xù)了這個(gè)長(zhǎng)度單位。全面屏iPhoneX屏幕尺寸為5.8英寸，如圖1.11所示;OPPOR11屏幕尺寸為6.01英寸，如圖1.12所示。正常屏iPhone8Plus屏幕尺寸為5.5英寸，如圖1.13所示;華為Mate10屏幕尺寸為5.9英寸，如圖1.14所示。02UI相關(guān)概念02UI相關(guān)概念像素(Pixel)像素是圖像最基本的采樣單位，圖像都是由一個(gè)個(gè)小點(diǎn)組成的。例如，在Photoshop中可以把位圖放大至3200%，所表現(xiàn)的矩形即是像素，原圖和放大后的圖如圖1.15、圖1.16所示。02UI相關(guān)概念分辨率(Resolution)分辨率是屏幕像素點(diǎn)的數(shù)量，一般用屏寬像素點(diǎn)數(shù)乘以屏高像素點(diǎn)數(shù)表示。例如，iPhoneX的屏幕分辨率是1125像素X2436像素，就是iPhoneX的屏幕是由1125列和2436行的像素點(diǎn)排列組成的。每個(gè)像素點(diǎn)發(fā)出不同的顏色光，構(gòu)成看到的圖像。色彩模式色彩模式是數(shù)字產(chǎn)品中表示顏色的一種算法。在數(shù)字世界中，為了表示各種顏色人們通常將顏色劃分為若干分量。由于成色原理的不同，決定了靠色光直接合成顏色的顏色設(shè)備與靠使用顏料的印刷設(shè)備在生成顏色方式上的區(qū)別。常用的色彩模式有:RGB色彩模式、CMYK色彩模式、Lab色彩模式等。02UI相關(guān)概念RGB色彩模式CMYK色彩模式一種加色色彩模式。它是工業(yè)界的一種顏色標(biāo)準(zhǔn)，通過(guò)對(duì)紅(Red)、綠(Green)、藍(lán)(Blue)三個(gè)通道的顏色變化以及它們相互之間的疊加來(lái)得到各種顏色，RGB就是代表紅、綠、藍(lán)三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。RGB色彩模式適用于顯示器、投影儀、掃描儀、數(shù)碼相機(jī)等電子設(shè)備。一種減色色彩模式。在印刷時(shí)應(yīng)用的是這種色彩模式CMYK代表印刷上用的四種顏色，C代表青色(Cyan)，M代表洋紅色(Magenta),Y代表黃色(Yellow)，K代表黑色(Black)。因?yàn)樵趯?shí)際應(yīng)用中，青色、洋紅色和黃色很難疊加形成真正的黑色，最多不過(guò)是褐色，因此才引入了黑色。黑色的作用是強(qiáng)化暗調(diào)，加深暗部色彩。CMYK色彩模式適用于由打印機(jī)、印刷機(jī)等設(shè)備生產(chǎn)出的印刷品。02UI相關(guān)概念Lab色彩模式由三個(gè)要素組成，亮度(L)、a和b兩個(gè)顏色通道。a包括的顏色是從深綠色(低亮度值)到灰色(中亮度值)再到亮粉紅色(高亮度值);b是從亮藍(lán)色(低亮度值)到灰色(中亮度值)再到黃色(高亮度值)。因此，這種顏色混合后將產(chǎn)生明亮效果的色彩。它是一種設(shè)備無(wú)關(guān)的顏色模型，彌補(bǔ)了RGB色彩模式和CMYK色彩模式兩種色彩模式的不足，也是一種基于生理特征的顏色模型。除常用的RGB模式、CMYK模式和Lab模式外，還有一些顏色模式:位圖模式、灰度模式、雙色調(diào)模式、索引顏色模式和多通道模式等。這些色彩模式可以在Photoshop軟件中找到，并且這些顏色模式有其特殊的用途，在這里就不再贅述了。02UI相關(guān)概念網(wǎng)點(diǎn)密度(dpi)像素密度(ppi)在印刷中，常用網(wǎng)點(diǎn)密度(dotperinch，dpi)來(lái)描述打印精度。例如，設(shè)置打印分辨率為96dpi，在打印過(guò)程中，每英寸的長(zhǎng)度打印96個(gè)點(diǎn)，當(dāng)然在相同尺寸打印長(zhǎng)度中，dpi越高，圖片越精美。這個(gè)概念被沿用到PC時(shí)代，Windows默認(rèn)dpi為96。像素密度(pixelperinch，ppi)常用于“屏幕顯示”的描述，用來(lái)表示每英寸像素點(diǎn)數(shù)量。顯示屏幕的ppi數(shù)值越高，圖片質(zhì)量越高。Photoshop默認(rèn)分辨率為72ppi，如圖1.17所示。02UI相關(guān)概念02UI相關(guān)概念dpi與ppi邏輯分辨率與像素倍率當(dāng)dpi的概念用在手機(jī)屏幕上時(shí)，表示手機(jī)每英寸可以顯示的像素點(diǎn)的數(shù)量。這時(shí)就可以用pi來(lái)描述這個(gè)屏幕。生產(chǎn)工藝越高，每平方英寸顯示像素點(diǎn)就越多。要理解邏輯分辨率與像素倍率的概念，需要先了解一下物理分辨率物理分辨率是指硬件所支持的分辨率邏輯分辨率是指軟件可以達(dá)到的分辨率邏輯分辨率乘以一個(gè)倍率得到物理分辨率，這個(gè)倍率就是像素倍率。在ioS中，一般會(huì)看到文件名有的帶@2x、@3x字樣，有的不帶。不帶的在普通屏上顯示，帶的分別在2倍率和3倍率的Retina屏幕上顯示。iOS屏幕參數(shù)表如表1.1所示。02UI相關(guān)概念02UI相關(guān)概念視網(wǎng)膜屏幕手機(jī)屏幕距離眼晴10~12英寸(約25~30cm)時(shí)，分辨率只要達(dá)到300ppi(每英寸300個(gè)像素點(diǎn))以上，眼睛就看不出像素點(diǎn)了，這樣的屏幕就稱為“視網(wǎng)膜(Retina)屏幕”。由于其具備超高的像素密度，因此屏幕顯示特別清晰、銳利。ppi計(jì)算公式如圖1.18所示。通過(guò)“iOS屏幕參數(shù)表”和“ppi計(jì)算公式”可以看出現(xiàn)在市場(chǎng)上主流手機(jī)屏幕都符合“視網(wǎng)膜屏幕”的特征，手機(jī)上的圖像也將越來(lái)越精致、細(xì)膩。常見(jiàn)智能手機(jī)系統(tǒng)0303常見(jiàn)智能手機(jī)系統(tǒng)Android系統(tǒng)Android系統(tǒng)是一種基于Lnux的自由及開(kāi)放源代碼的操作系統(tǒng)，主要用于移動(dòng)設(shè)備，如智能手機(jī)和亞板電腦，由Google公司和開(kāi)放手機(jī)聯(lián)盟領(lǐng)導(dǎo)及開(kāi)發(fā)。國(guó)內(nèi)一般寫為“安卓”，嚴(yán)格意義上說(shuō)“Android”和“安卓”還是有區(qū)別的。Android系統(tǒng)圖標(biāo)如圖1.19所示。03常見(jiàn)智能手機(jī)系統(tǒng)Android系統(tǒng)的發(fā)展歷程2008年9月，谷歌公司正式發(fā)布了Android1.0系統(tǒng)，這也是Androld系統(tǒng)最早的版本。2009年4月，谷歌公司正式推出了Android1.5系統(tǒng)。2009年10月26日發(fā)布Android2.0系統(tǒng)。2011年2月2日發(fā)布Android3.0系統(tǒng)。2011年10月19日發(fā)布Android4.0系統(tǒng)。2014年10月15日發(fā)布Android5.0系統(tǒng)。2015年5月28日發(fā)布Androld6.0系統(tǒng)。2016年8月22日發(fā)布Android7.0系統(tǒng)。2017年8月22日發(fā)布Android8.0系統(tǒng)03常見(jiàn)智能手機(jī)系統(tǒng)03常見(jiàn)智能手機(jī)系統(tǒng)Android系統(tǒng)有趣的命名方法Android系統(tǒng)在正式發(fā)行之前，最開(kāi)始擁有兩個(gè)內(nèi)部測(cè)試版本，并且以著名的機(jī)器人名稱來(lái)對(duì)其進(jìn)行命名，它們分別是阿童木(AndroidBeta)和發(fā)條機(jī)器人(Android1.0)。后來(lái)由于涉及版權(quán)問(wèn)題，谷歌將其命名規(guī)則變更為用甜點(diǎn)作為它們系統(tǒng)版本的代號(hào)。甜點(diǎn)命名法開(kāi)始于Android1.5系統(tǒng)發(fā)布的時(shí)候。作為每個(gè)版本代表的甜點(diǎn)的尺寸越變?cè)酱?然后按照26個(gè)字母數(shù)序:紙杯蛋糕(Cupcake，Android1.5系統(tǒng))，甜甜圈(Donut,Android1.6系統(tǒng))，法式奶油夾心甜點(diǎn)(Elair，Android2.0/2.1系統(tǒng))，凍酸奶(Froyo,Android2.2系統(tǒng))，姜餅(Gingerbread，Android2.3系統(tǒng))，蜂巢(Honeycomb,Android3.0系統(tǒng))，冰激凌三明治(lceCreamSandwich，Android4.0系統(tǒng))，果凍豆(JelyBean，Android4.1系統(tǒng)和Android4.2系統(tǒng))，奇巧(KtKat，Android4.4系統(tǒng))，棒棒糖(Lolipop,Android5.0系統(tǒng)),棉花糖(Marshmallow,Android6.0系統(tǒng)),牛軋?zhí)?Nougat,Android7.0系統(tǒng))奧利奧(Oreo，Android8.0系統(tǒng))。03常見(jiàn)智能手機(jī)系統(tǒng)Android最新版本2017年8月22日發(fā)布的Android8.0系統(tǒng)特點(diǎn)如下。通知界面通知界面的快捷鍵空間更大，快捷鍵順序經(jīng)過(guò)調(diào)整:長(zhǎng)按推送消息可以開(kāi)啟或關(guān)閉通知。01單擊此處編輯標(biāo)題樣式設(shè)置界面PinnedShortcuts圖標(biāo)形狀設(shè)置界面也有大幅變化，圖標(biāo)重新設(shè)計(jì)，主菜單覆蓋性更廣，子菜單更多。PinnedShortcuts功能(類似iPhone6S中3DTouch功能)，長(zhǎng)按一個(gè)軟件后可以彈出子菜單，從而達(dá)到快捷操作的目的。新系統(tǒng)中的開(kāi)發(fā)者可以使用不同的應(yīng)用圖標(biāo)，如圓角矩形或圓形圖標(biāo)，不過(guò)所有的圖標(biāo)只能二選一。01單擊此處編輯標(biāo)題樣式后臺(tái)限制安裝限制分屏進(jìn)一步優(yōu)化后臺(tái)程序，減少應(yīng)用在沒(méi)完全退出后占用系統(tǒng)的資源，并且減少電量的消耗，進(jìn)一步向ios學(xué)習(xí)。在設(shè)置中添加安裝限制功能，可以避免關(guān)聯(lián)應(yīng)用自動(dòng)安裝的問(wèn)題分屏畫中畫功能得到強(qiáng)化，變得更加流暢。懸浮窗可以被隨意拖動(dòng)位置，在主屏幕中繼續(xù)工作。03常見(jiàn)智能手機(jī)系統(tǒng)字體優(yōu)化表情符號(hào)谷歌對(duì)系統(tǒng)字體增加了更多的支持，開(kāi)發(fā)者可以更改字體樣式，讓用戶有了更多的字體選擇。增加超過(guò)60個(gè)符合Unicode10標(biāo)準(zhǔn)的表情符號(hào)。03常見(jiàn)智能手機(jī)系統(tǒng)國(guó)內(nèi)安卓現(xiàn)狀小米MIUI:MIUl成為小米公司最具競(jìng)爭(zhēng)力的產(chǎn)品，經(jīng)過(guò)多年的不斷完善MIUI的系統(tǒng)完整度相當(dāng)高，在系統(tǒng)集成功能方面相當(dāng)完全，可以說(shuō)只要你想到的功能，在MIU的系統(tǒng)集成功能方面都能找到，小米公司的成功可以說(shuō)是完全借助在MIUI成功的基礎(chǔ)上，MIU也可以說(shuō)是國(guó)產(chǎn)系統(tǒng)的先驅(qū)產(chǎn)品。產(chǎn)品展示如圖1.21、圖1.22所示。03常見(jiàn)智能手機(jī)系統(tǒng)魅族Fyme魅族公司的操作系統(tǒng)，其中全新的Fyme更是被稱為“最好用的系統(tǒng)”。Fyme的設(shè)計(jì)之初就定位追求流暢與簡(jiǎn)單易上手特質(zhì)，在系統(tǒng)交互方面一直尋求最佳的解決方案。產(chǎn)品展示如圖1.23所示。03常見(jiàn)智能手機(jī)系統(tǒng)華為EMUIEmotionUI是華為基于Android系統(tǒng)進(jìn)行開(kāi)發(fā)的情感化用戶界面。EMU5.0以上的版本在各方面都做出了很大的改進(jìn)，使其能夠在眾多的OS系統(tǒng)中脫穎而出。產(chǎn)品展示如圖1.24所示。03常見(jiàn)智能手機(jī)系統(tǒng)錘子SmartisanOS錘子科技推出的安卓系統(tǒng)，可以說(shuō)SmartisanOS是iOS6最忠實(shí)的模仿者，獨(dú)特的擬物化圖標(biāo)與一直在創(chuàng)新的功能使得SmartisanOS中顯得獨(dú)具一格，創(chuàng)新的功能與系統(tǒng)優(yōu)化使得SmartisanOS在用戶心目中有著高度兩極分化的口碑。產(chǎn)品展示如圖1.25所示。03常見(jiàn)智能手機(jī)系統(tǒng)iOSiOS是由蘋果公司開(kāi)發(fā)的移動(dòng)操作系統(tǒng)。最初是為iPhone設(shè)計(jì)使用的，后來(lái)陸續(xù)套用到iPodtouch、iPad及AppleTV等產(chǎn)品上。ios屬于類UNX的商業(yè)操作系統(tǒng)。由于ioS界面精美、規(guī)范性強(qiáng)、運(yùn)行快、操作流暢，所以深受廣大用戶喜愛(ài)iOS的發(fā)展歷史。03常見(jiàn)智能手機(jī)系統(tǒng)iOS的發(fā)展歷史2007年6月iPhoneOS1.0。2007年1月的MacWord大會(huì)上，喬布斯發(fā)布了蘋果公司的第一款手機(jī)，當(dāng)時(shí)iOs還沒(méi)有一個(gè)正式的名稱,只是叫作iPhoneRunsosX同年6月推出iPhoneOs1.0。2008年7月iPhoneOS2.0.2008年3月發(fā)布了第一款iOS軟件開(kāi)發(fā)包，并在當(dāng)年7月推出iPhoneOS2.0的同時(shí)推出AppStore，這是ios的一個(gè)重要里程碑，開(kāi)啟了ioS和整個(gè)移動(dòng)應(yīng)用時(shí)代。2009年6月iPhoneOS3.0.iPhoneOs3.0增加復(fù)制粘貼、Spotlight搜索和語(yǔ)音控制等新功能。設(shè)計(jì)風(fēng)格為擬物風(fēng)格設(shè)計(jì)(Skeuomorphism)。03常見(jiàn)智能手機(jī)系統(tǒng)iOS的發(fā)展歷史2010年6月iOS4。iPhoneOS操作系統(tǒng)正式更名為ioS。多任務(wù)處理時(shí)，用戶可以通過(guò)雙擊Home鍵在應(yīng)用程序之間快速切換，推出使用高分辨率Retina屏幕。2011年10月iOS5。Sin的出現(xiàn)是蘋果公司第一次嘗試讓用戶以不同的方式使用自己的iOS設(shè)備。擬物寫實(shí)設(shè)計(jì)風(fēng)格在ios5中達(dá)到極致。2012年9月iOS6。引入了蘋果公司開(kāi)發(fā)的地圖服務(wù)。此外，蘋果設(shè)備的iCloud服務(wù)得到了更廣泛的使用:新的iOS允許共享照片。2013年9月i0S7。采用全新扁平化設(shè)計(jì)方法對(duì)圖標(biāo)界面進(jìn)行設(shè)計(jì)。極大簡(jiǎn)化ioS的操作方法。TouchID允許通過(guò)指紋識(shí)別來(lái)解鎖設(shè)備，增加AirDrop傳輸方式，輕松地將文件在果設(shè)備間進(jìn)行傳輸。03常見(jiàn)智能手機(jī)系統(tǒng)iOS的發(fā)展歷史2014年9月iOS8。蘋果公司將其桌面和移動(dòng)平臺(tái)緊密地結(jié)合在一起。在Mac上也可以閱讀和編輯iMessages，或者接聽(tīng)電話。2015年9月iOS9。13iOS9主要集中在性能和穩(wěn)定性上的改進(jìn)。降低了ioS9升級(jí)安裝所需的存儲(chǔ)空間，從原來(lái)的4.6GB下降到1.3GB。2016年9月iOS10。新式屏幕通知查看方式，將Sin開(kāi)放給第三方，更加智能?；瑒?dòng)解鎖模式取消，改為按Home鍵直接解鎖，鎖屏可以快捷打開(kāi)相機(jī)功能。2017年6月iOS11。增加了對(duì)AR增強(qiáng)現(xiàn)實(shí)的支持，為開(kāi)發(fā)者提供ARKt;支持ApplePay轉(zhuǎn)賬功能:優(yōu)化了相機(jī)的功能;所有功能集中到控制中心界面，包括鎖屏、3DTouch;在鎖屏界面，iOS11更加重視一體化，用戶可以通過(guò)滑動(dòng)實(shí)現(xiàn)所有操作。03常見(jiàn)智能手機(jī)系統(tǒng)最新版本2018年6月iOS12全新的iOS12最大的亮點(diǎn)是提升了速度和流暢性。據(jù)官方介紹，相比上一代ioS11，iOS12的App啟動(dòng)速度快了40%，輸入法調(diào)出速度快了50%，相機(jī)啟動(dòng)速度快了70%。另外，還新增了70多個(gè)表情符號(hào)，針對(duì)iPhonexS、iPhoneXSMax和iPhoneXR的相機(jī)預(yù)覽推出景深控制，改進(jìn)了iPhoneXS、iPhoneXSMax和iPhoneXR的蜂窩移動(dòng)網(wǎng)連接性，添加使用面容D或觸控D更改或還原子女的“屏幕使用時(shí)間”密碼，針對(duì)iPhoneX、iPhone8和iPhone8Plus，增加了性能管理功能來(lái)避免設(shè)備意外關(guān)機(jī)，用戶可以選擇停用此功能，“電池健康”更新后可驗(yàn)證iPhoneXS、iPhoneXSMax和iPhoneXR的電池是否是正品。03常見(jiàn)智能手機(jī)系統(tǒng)蘋果公司系列產(chǎn)品iMac系列1998年，蘋果公司推出iMac計(jì)算機(jī)，如圖1.26所示。它的外殼由半透明的藍(lán)色塑料制成，呈現(xiàn)出蛋形結(jié)構(gòu)，與其他計(jì)算機(jī)設(shè)計(jì)有明顯區(qū)別。時(shí)至今日，iMac計(jì)算機(jī)的設(shè)計(jì)理念始終沒(méi)有改變，那就是設(shè)計(jì)出眾的高性能臺(tái)式一體計(jì)算機(jī)。03常見(jiàn)智能手機(jī)系統(tǒng)蘋果公司系列產(chǎn)品2018年1月推出全新iMacPro計(jì)算機(jī)，如圖127所示。它已經(jīng)配備18核處理器TurboBoost最高可達(dá)4.5GHz，最高可達(dá)42MB緩存，最高可達(dá)每秒11萬(wàn)億次單精度浮點(diǎn)運(yùn)算，最高可達(dá)4TB固態(tài)硬盤，3.3GB/s寫入速度，2.8GB/s讀取速度，最高可達(dá)4400萬(wàn)像素5K顯示屏。當(dāng)然這么高的配置價(jià)格也是非常高的，是目前所有蘋果產(chǎn)品價(jià)格最高的一款產(chǎn)品。03常見(jiàn)智能手機(jī)系統(tǒng)魅族Fyme魅族公司的操作系統(tǒng)，其中全新的Fyme更是被稱為“最好用的系統(tǒng)”。Fyme的設(shè)計(jì)之初就定位追求流暢與簡(jiǎn)單易上手特質(zhì)，在系統(tǒng)交互方面一直尋求最佳的解決方案。產(chǎn)品展示如圖1.23所示。03常見(jiàn)智能手機(jī)系統(tǒng)華為EMUIEmotionUI是華為基于Android系統(tǒng)進(jìn)行開(kāi)發(fā)的情感化用戶界面。EMU5.0以上的版本在各方面都做出了很大的改進(jìn)，使其能夠在眾多的OS系統(tǒng)中脫穎而出。產(chǎn)品展示如圖1.24所示。03常見(jiàn)智能手機(jī)系統(tǒng)錘子SmartisanOS錘子科技推出的安卓系統(tǒng)，可以說(shuō)SmartisanOS是iOS6最忠實(shí)的模仿者，獨(dú)特的擬物化圖標(biāo)與一直在創(chuàng)新的功能使得SmartisanOS中顯得獨(dú)具一格，創(chuàng)新的功能與系統(tǒng)優(yōu)化使得SmartisanOS在用戶心目中有著高度兩極分化的口碑。產(chǎn)品展示如圖1.25所示。03常見(jiàn)智能手機(jī)系統(tǒng)03常見(jiàn)智能手機(jī)系統(tǒng)dpi與ppi邏輯分辨率與像素倍率當(dāng)dpi的概念用在手機(jī)屏幕上時(shí)，表示手機(jī)每英寸可以顯示的像素點(diǎn)的數(shù)量。這時(shí)就可以用pi來(lái)描述這個(gè)屏幕。生產(chǎn)工藝越高，每平方英寸顯示像素點(diǎn)就越多。要理解邏輯分辨率與像素倍率的概念，需要先了解一下物理分辨率物理分辨率是指硬件所支持的分辨率邏輯分辨率是指軟件可以達(dá)到的分辨率邏輯分辨率乘以一個(gè)倍率得到物理分辨率，這個(gè)倍率就是像素倍率。在ioS中，一般會(huì)看到文件名有的帶@2x、@3x字樣，有的不帶。不帶的在普通屏上顯示，帶的分別在2倍率和3倍率的Retina屏幕上顯示。iOS屏幕參數(shù)表如表1.1所示。03常見(jiàn)智能手機(jī)系統(tǒng)03常見(jiàn)智能手機(jī)系統(tǒng)視網(wǎng)膜屏幕手機(jī)屏幕距離眼晴10~12英寸(約25~30cm)時(shí)，分辨率只要達(dá)到300ppi(每英寸300個(gè)像素點(diǎn))以上，眼睛就看不出像素點(diǎn)了，這樣的屏幕就稱為“視網(wǎng)膜(Retina)屏幕”。由于其具備超高的像素密度，因此屏幕顯示特別清晰、銳利。ppi計(jì)算公式如圖1.18所示。通過(guò)“iOS屏幕參數(shù)表”和“ppi計(jì)算公式”可以看出現(xiàn)在市場(chǎng)上主流手機(jī)屏幕都符合“視網(wǎng)膜屏幕”的特征，手機(jī)上的圖像也將越來(lái)越精致、細(xì)膩。文件存儲(chǔ)格式0404文件存儲(chǔ)格式GIF格式JPEG格式圖像互換格式(GraphicsInterchangeFormat，GIF)，是CompuServe公司在1987年開(kāi)發(fā)的圖像文件格式，壓縮率一般在50%左右。GIF格式的優(yōu)點(diǎn)是體積小、成像較清晰;缺點(diǎn)是只能支持256色，色彩數(shù)量較少，但可以用來(lái)生成動(dòng)畫，所以沿用至今。JPEG(JointPhotographicExpertsGroup)是在國(guó)際標(biāo)準(zhǔn)化組織(ISO)領(lǐng)導(dǎo)下制定靜態(tài)圖像壓縮標(biāo)準(zhǔn)的委員會(huì)名稱的英文縮寫。JPEG(JPG)格式就是該委員會(huì)制定的。由于JPEG格式優(yōu)良的品質(zhì)，被廣泛應(yīng)用于互聯(lián)網(wǎng)和數(shù)碼相機(jī)領(lǐng)域，大部分使用的圖像都采用了JPEG格式壓縮標(biāo)準(zhǔn)。04文件存儲(chǔ)格式PNG格式SVG格式便攜式網(wǎng)絡(luò)圖形(PortableNetworkGraphics，PNG)格式是一種無(wú)損壓縮的位圖格式。PNG格式的特點(diǎn)是體積小、無(wú)損壓縮、索引彩色模式、更優(yōu)化的網(wǎng)絡(luò)傳輸顯示、支持透明效果，還支持真彩和灰度級(jí)圖像的Apha通道透明度，最高支持24位真彩色圖像及8位灰度圖像。目前，它是移動(dòng)產(chǎn)品使用圖片的主流格式?？煽s放矢量圖形(ScalableVectorGraphics，SVG)格式是基于可擴(kuò)展標(biāo)記語(yǔ)言(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集》，用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定，是一個(gè)開(kāi)放標(biāo)準(zhǔn)，與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個(gè)整體。如何進(jìn)行手機(jī)UI設(shè)計(jì)0505如何進(jìn)行手機(jī)UI設(shè)計(jì)U設(shè)計(jì)的流程—套完整的App設(shè)計(jì)流程要先由產(chǎn)品經(jīng)理、用戶調(diào)研、交互設(shè)計(jì)師等進(jìn)行需求分析、市場(chǎng)分析、用戶研究等工作，得出信息架構(gòu)和操作流程;然后交互設(shè)計(jì)師設(shè)計(jì)出原型圖;再交由視覺(jué)設(shè)計(jì)師完成視覺(jué)設(shè)計(jì)，最后交給開(kāi)發(fā)人員寫前端和后端代碼，測(cè)試上線。App設(shè)計(jì)流程如圖1.36所示。05如何進(jìn)行手機(jī)UI設(shè)計(jì)U設(shè)計(jì)的流程由此可以看出，UI設(shè)計(jì)只是其中的一個(gè)環(huán)節(jié)，開(kāi)發(fā)一個(gè)App需要很多部門協(xié)同完成，App各階段工作流程圖如圖1.37所示。而U設(shè)計(jì)師工作包括繪制原型圖、效果圖、切圖等。05如何進(jìn)行手機(jī)UI設(shè)計(jì)軟件繪制界面交互設(shè)計(jì)師完成原型交互設(shè)計(jì)后，U設(shè)計(jì)師使用軟件對(duì)原型圖進(jìn)行視覺(jué)呈現(xiàn)，讓界面變得更加艷麗。常用軟件工具llustrator:矢量圖形設(shè)計(jì)軟件。它具有造型能力強(qiáng)大、使用方便的特點(diǎn)。該軟件主要應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等，也可以為線稿提供較高的精度和控制，適合生產(chǎn)任何小型設(shè)計(jì)到大型的復(fù)雜項(xiàng)目。作為U設(shè)計(jì)的主要工具之一，更多使用它來(lái)設(shè)計(jì)線性圖標(biāo)、扁平圖標(biāo)、復(fù)雜圖標(biāo)的線稿等。lustratorCC2017啟動(dòng)界面如圖1.38所示。05如何進(jìn)行手機(jī)UI設(shè)計(jì)05如何進(jìn)行手機(jī)UI設(shè)計(jì)Photoshop圖形處理軟件。PhotoshopCC2017啟動(dòng)界面如圖1.39所示。它主要處理以像素構(gòu)成的數(shù)字圖像。通過(guò)使用Photoshop眾多的編輯與繪圖工具，可以有效地進(jìn)行圖片編輯工作。從2013年推出PhotoshopCC版本之后，不斷對(duì)其加強(qiáng)針對(duì)移動(dòng)產(chǎn)品設(shè)計(jì)功能的開(kāi)發(fā)和升級(jí)，Photoshop已經(jīng)成為UI設(shè)計(jì)最重要的工具之一。05如何進(jìn)行手機(jī)UI設(shè)計(jì)Cinema4D(C4D)非傳統(tǒng)的3D創(chuàng)作軟件。Cinema4DR18啟動(dòng)界面如圖1.4O所示。Cinema4D更加注重工作流程的流暢性、舒適性、合理性、易用性和高效性。因此，使用Cinema4D會(huì)讓設(shè)計(jì)師在創(chuàng)作設(shè)計(jì)時(shí)感到非常舒服，在使用過(guò)程中更加便捷，有更多的精力置于創(chuàng)作之中，即使是新用戶，也會(huì)感覺(jué)到Cinema4D的上手非常容易。由于C4D具有強(qiáng)大的3D創(chuàng)作能力與上手快的特點(diǎn)，所以很多UI設(shè)計(jì)師在構(gòu)建三維場(chǎng)景時(shí)，首選C4D。05如何進(jìn)行手機(jī)UI設(shè)計(jì)AfterEffects一款圖形視頻處理軟件。AfterEffectsCC2017啟動(dòng)界面如圖1.41所示。它被用于實(shí)現(xiàn)設(shè)計(jì)視頻特技的效果。現(xiàn)在UI設(shè)計(jì)師更愿意使用AfterEffects來(lái)實(shí)現(xiàn)App交互效果或動(dòng)畫效果，以增強(qiáng)作品的感染力。顯然，現(xiàn)在會(huì)使用AfterEffects的UI設(shè)計(jì)師更受用人單位青睞。05如何進(jìn)行手機(jī)UI設(shè)計(jì)Sketch一款輕量、易用的矢量設(shè)計(jì)工具。它是為圖標(biāo)設(shè)計(jì)和界面設(shè)計(jì)而設(shè)計(jì)產(chǎn)生的。Sketch容易被理解并操作起來(lái)簡(jiǎn)單，有經(jīng)驗(yàn)的設(shè)計(jì)師花上幾個(gè)小時(shí)便能將自己的設(shè)計(jì)技巧在Sketch