盒子模型與背景屬性

一.盒子模型

1.介紹

2. 元素的總寬度和總高度
   
   二.自定義邊框——border
   
   1.基本設(shè)置
   
   2.邊框?qū)挾取狟order Width
   
   3.邊框顏色——Border Color
   
   4.邊框樣式——Border style
   
   5.CSS的邊寬和高度——width height
   
   三.背景——background
   
   1.背景顏色——background color
   
   2.背景圖像—— background image
   
   3.背景重復(fù)—— background repeat
   
   4.背景的附件（固定與滾動）——background attachment
   
   一.盒子模型
   
   1.介紹
   
   所有HTML元素都可以視為方框。
   
   CSS邊框模型代表網(wǎng)站的設(shè)計(jì)和布局。
   
   它由邊緣（margins），邊框（ borders），內(nèi)邊距（paddings），和內(nèi)容（content）組成的。
   
   這些屬性以什么的順序工作：top->right->bottom->left。
   
   
   
   
   
   小知識：
   
   
   
   網(wǎng)頁的每個(gè)元素都是一個(gè)盒子（box）。 CSS使用盒子模型來確定盒子有多大以及如何放置它們。
   
   框模型還用于計(jì)算HTML元素的實(shí)際寬度和高度。
   
3. 元素的總寬度和總高度
   
   （1）總寬度等于左右邊緣，邊框，邊距相加：
   
   
   
   
   
   
   
   （2）總高度：上下相加
   
   
   
   
   
   二.自定義邊框——border
   
   1.基本設(shè)置
   
   border屬性允許您自定義HTML元素的邊框。
   
   為了向元素添加邊框，您需要指定邊框的大小，樣式，顏色。
   
   p {
   
      padding: 10px;    
   
      border: 5px solid green;
   
   }
   
   
   
   2.邊框?qū)挾取狟order Width
   
   使用border-width屬性可以 單獨(dú)設(shè)置邊框?qū)挾?br />
   
   
   p{
   
      padding: 10px;    
   
      border-style: solid;
   
      border-width: 2px;
   
   }
   
   
   
   3.邊框顏色——Border Color
   
   可以使用顏色名稱，RGB或十六進(jìn)制值定義元素的邊框顏色。
   
   
   
   p.first {
   
      padding: 10px;
   
      border-style: solid;
   
      border-width: 2px;
   
      border-color: blue;
   
   }
   
   
   
   小知識：除非設(shè)置border-style屬性，否則所有border屬性都不會起作用。
   
   
   
   4.邊框樣式——Border style
   
   默認(rèn)值為none
   
   多種樣式：dotted（點(diǎn)）, dashed（虛線）, double（雙邊框）等。
   
   p {border-style: none;}
   
   p {border-style: dotted;}
   
   p{border-style: dashed;}
   
   p{border-style: double;}
   
   p {border-style: groove;}
   
   p {border-style: ridge;}
   
   p{border-style: inset;}
   
   p{border-style: outset;}
   
   p {border-style: hidden;}
   
   
   
   
   
   
   
   5.CSS的邊寬和高度——width height
   
   要設(shè)置<div>元素的總寬度和高度為100px：
   
   div {
   
      border: 5px solid green;    
   
      width: 90px;
   
      height: 90px;
   
   }
   
   
   
   框的總寬度和高度將為90px + 5px（邊框）+ 5px（邊框）= 100px；
   
   
   
   可以使用百分比 進(jìn)行分配。
   
   div {
   
      border: 5px solid green;    
   
      width: 100%;
   
      height: 90px;
   
   }
   
   
   
   3.要設(shè)置元素的最小和最大高度與寬度，可以使用以下屬性：
   
   
   
   min-width-元素的最小寬度
   
   min-height-元素的最小高度
   
   max-width-元素的最大寬度
   
   max-height-元素的最大高度
   
   p{
   
      border: 5px solid green;    
   
      min-height: 100px;       
   
   }
   
   
   
   三.背景——background
   
   1.背景顏色——background color
   
   background-color屬性用來指定一個(gè)元素的背景色。
   
   
   
   列：
   
   
   
   body {
   
      background-color: #C0C0C0;
   
   }
   
   h1 {
   
      background-color: rgb(135,206,235);
   
   }
   
   p {
   
      background-color: LightGreen;
   
   }
   
   
   
   2.背景圖像—— background image
   
   background-image屬性中的元素可以設(shè)置一個(gè)或幾個(gè)背景圖像。
   
   URL指定路徑的圖像文件。相對路徑和絕對路徑均受支持。
   
   默認(rèn)情況下，背景圖像放置在元素的左上角，并在垂直和水平方向重復(fù)以覆蓋整個(gè)元素。
   
   列;為<p>元素設(shè)置背景圖片。
   
   
   
   p {
   
      padding: 30px;
   
      background-image: url("1.jpg");
   
      color: white;   
   
   }
   
   
   
   小知識
   
   
   
   要指定多個(gè)圖像，只需用逗號分隔URL。
   
   
   
   3.背景重復(fù)—— background repeat
   
   repeat-x：圖片延x軸復(fù)制
   
   repeat-y：圖片延y軸復(fù)制
   
   Inherited：繼承父級屬性相同的指定值
   
   no-repeat:不重復(fù)，只有單個(gè)圖片
   
   列：
   
   
   
   body {
   
      background-image: url("1.png");
   
      background-repeat: repeat-x;
   
   }
   
   p {
   
      background-image: url("1.png");
   
      background-repeat: inherit;
   
      margin-top: 100px;
   
      padding: 40px;
   
   }
   
   
   
   4.背景的附件（固定與滾動）——background attachment
   
   有效值
   
   
   
   fixed：固定背景圖片
   
   scroll：向下滾動頁面是，背景也隨著滾動
   
   Inherit：繼承
   
   列：
   
   
   
   body {
   
      background-image: url("1.png");
   
      background-repeat: no-repeat;
   
      background-attachment: scroll;
   
   }
   
   
   

本文6000字上下，反復(fù)校對6遍以上，初步閱讀完大概需要25分鐘，若是深入理解并完全吸收則建議“先收藏再反復(fù)的品，細(xì)細(xì)的品”。希望對各位朋友有所幫助，不足之處望校正，祝閱讀愉快。

雙20年終究還是來了，互聯(lián)網(wǎng)產(chǎn)品對于這個(gè)時(shí)代不是什么新鮮事了，互聯(lián)網(wǎng)人也從未停止對優(yōu)秀產(chǎn)品的探索和創(chuàng)新。而做為一個(gè)設(shè)計(jì)人的我們，在前行的腳步中也應(yīng)該溫故知新，就讓我跟大家一起來對iOS、Android的設(shè)計(jì)規(guī)范、適配問題做一次全面的梳理和復(fù)習(xí)吧。

iOS設(shè)計(jì)規(guī)范

蘋果自07年1月9日正式發(fā)布iPhone到目前為止的iPhone11Pro Max，已經(jīng)歷了十三代產(chǎn)品。19年9月11日推出的11、11Pro、11Pro Max并沒有新增尺寸，所以對設(shè)計(jì)師而言也就沒有額外新增工作量了，還是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做設(shè)計(jì)稿，再提供@2x、@3x切圖。

以下為蘋果手機(jī)歷代產(chǎn)品明細(xì)（話說你擁有過那幾代產(chǎn)品，歡迎留言交流）

一代：iPhone

二代：iPhone3G

三代：iPhone3GS

四代：iPhone 4

五代：iPhone 4s

六代：iPhone 5

七代：iPhone 5s、iPhone 5c

八代：iPhone6、iPhone6 Plus

九代：iPhone 6s、iPhone 6s Plus

十代：iPhone7、iPhone7 Plus

十一代：iPhone8、iPhone8 Plus、iPhone X

十二代：iPhone XS、iPhone XS Max、iPhone XR

十三代：iPhone11、iPhone11Pro、iPhone11Pro Max

如何有效記住iOS設(shè)計(jì)規(guī)范，這里我總結(jié)了一個(gè)方法“iOS五點(diǎn)兩圖記憶法”，也就是五個(gè)點(diǎn)+兩張圖。

1、設(shè)計(jì)尺寸：375x667pt @1x（750x1334px @2x）為基準(zhǔn)設(shè)計(jì)。

2、設(shè)計(jì)工具：Sketch、Adobe XD、Photoshop

3、預(yù)覽效果：Sketch Mirror、Adobe XD或Ps Play

4、切圖輸出：@2x @3x兩套

5、標(biāo)注工具：藍(lán)湖，摹客

兩圖psd下載鏈接：https://pan.baidu.com/s/15g2x0vDd1yZevADuUj1V3g 提取碼: i4ai

考考你：

1、iPhone8尺寸的設(shè)計(jì)稿如何快速變成iPhoneX的設(shè)計(jì)稿？

2、@2倍圖被當(dāng)作@3倍進(jìn)行開發(fā)，會導(dǎo)致什么樣的后果？

3、為什么要用375x667pt @1倍圖進(jìn)行設(shè)計(jì)？（后文也有詳細(xì)答案哦）

4、iPhone8顯示為34px的文字在iPhone11 pro Max里面是不是也是34px？

這里我們首先重點(diǎn)理解下PX和PT這兩個(gè)單位， 弄清楚為什么建議使用一倍圖進(jìn)行UI設(shè)計(jì)，才能在設(shè)計(jì)中以不變應(yīng)萬變。（說明：該部分內(nèi)容優(yōu)化自靜電老師的總結(jié)。公眾號@靜Design）

PX大家可能比較熟悉，就是像素，英文pixel的簡稱。最通俗的理解就是找一個(gè)放大鏡（不是電腦中的放大鏡，是真實(shí)的放大鏡），然后對準(zhǔn)自己面前的顯示器或者手機(jī)屏幕觀看，大部分顯示器會在放大鏡下出現(xiàn)一個(gè)個(gè)點(diǎn)。這就是我們平時(shí)所說的像素概念。在一臺物理分辨率為1080x1920px的顯示器中，橫向分布1920個(gè)點(diǎn)，縱向則有1080個(gè)點(diǎn)。這些點(diǎn)通過顯示器的光學(xué)特性，為我們組成不同的圖像。

請注意， 在不同尺寸的顯示器上，這些點(diǎn)的單位面積并不是一樣的。比如一臺22英寸的1080p液晶顯示器與一臺27英寸的1080p液晶顯示器，可以發(fā)現(xiàn)這兩臺顯示器的像素分布就是27英寸的顯示效果明顯遜于22英寸顯示器的效果，一個(gè)重要的原因就是兩臺液晶面板中的“像素”顆粒大小不一。

由此可見，像素這個(gè)單位是一個(gè)相對單位，不能用厘米、毫米等這些絕對度量單位來衡量他的長度或者寬度，因?yàn)?像素只代表一個(gè)單位的“點(diǎn)”。

另一個(gè)重要單位是PT，英文point的簡稱，這個(gè)單位也是iOS開發(fā)過程中使用的單位，與px這樣的相對單位不同，PT（Point）是一個(gè)絕對單位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。

同樣用簡單直觀的例子來演示，拿兩臺不同型號的iPhone，比如一臺ip11和一臺ip11pro Max，打開同樣一款應(yīng)用（如QQ音樂），準(zhǔn)備好一把尺子，使用尺子分別測量最上方title“音樂館”文字尺寸。經(jīng)測量，可以發(fā)現(xiàn)不同型號的“音樂館”文字的尺寸都一樣。也可以請iOS開發(fā)人員分別寫兩個(gè)針對不同尺寸機(jī)型適配的同一個(gè)文件，并在兩部手機(jī)安裝，確保這個(gè)文件中的字體使用一個(gè)字號（30PT）。在兩個(gè)手機(jī)中運(yùn)行并用尺子測量，我們發(fā)現(xiàn)他們的物理尺寸完全一樣。

請大家記住一點(diǎn)，px是相對單位，pt為絕對單位（類似單位為厘米，毫米等等）。在不確定屏幕密度的情況下，px與pt沒有任何可比性。

在開發(fā)工程師眼中，你如果使用750px的分辨率作圖，那么按原大小標(biāo)注設(shè)計(jì)稿中的尺寸的話，他們同樣在開發(fā)環(huán)境中是要換算為一倍尺寸的，比如你標(biāo)注了字號為40px，那么最終開發(fā)工程師寫在代碼里的就是20pt，除以2的關(guān)系。但是呢，如果使用一倍基準(zhǔn)分辨率作圖，那么就不用除以2啦，所有尺寸開發(fā)工程師直接拿過去隨取隨用。

sketch作為一款純矢量的移動端ui設(shè)計(jì)軟件，不管是設(shè)計(jì)還是后期與開發(fā)工程師的配合，都嚴(yán)格遵從開發(fā)原理，這種設(shè)計(jì)方法可以最大限度保證設(shè)計(jì)稿的復(fù)現(xiàn)，同時(shí)也可以減小文件體積和系統(tǒng)資源消耗，不管是從哪個(gè)方面看，都是設(shè)計(jì)師制作ui界面的明智之選。

最后總結(jié)一下原因，設(shè)計(jì)師使用一倍基準(zhǔn)尺寸作圖，主要是單位轉(zhuǎn)換方便，輸出切圖方便，理解簡單。對于工程師，他們不用再進(jìn)行復(fù)雜的換算，有助于完美復(fù)現(xiàn)設(shè)計(jì)稿。

我們繼續(xù)熟悉iOS中一些必不可少的頁面規(guī)范細(xì)則。

一、引導(dǎo)頁

引導(dǎo)頁是一張完整圖，不能適配，因此需要單獨(dú)出設(shè)計(jì)圖，iOS共需提供6套尺寸，當(dāng)然也支持視頻形式。（目前5以下的適配基本淘汰）

二、圖標(biāo)

以1024x1024px尺寸進(jìn)行圖標(biāo)創(chuàng)作即可。再通過現(xiàn)成尺寸模版資源，一鍵生成整套尺寸導(dǎo)出即可。（模版鏈接：https://developer.apple.com/design/resources/Template-AppIcons-iOS）

注意：最終提交給到程序員的切圖是直角，非圓角圖標(biāo)。

其他設(shè)備圖標(biāo)尺寸

三、狀態(tài)欄和導(dǎo)航欄（具體尺寸見五點(diǎn)二圖）

狀態(tài)欄：顯示時(shí)間、運(yùn)營商信息、電池電量等信息區(qū)域。(齊劉海區(qū)域)

導(dǎo)航欄：狀態(tài)欄下面的區(qū)域，含頁面標(biāo)題、功能圖標(biāo)等信息區(qū)域。

狀態(tài)欄跟導(dǎo)航欄一般會進(jìn)行一體化設(shè)計(jì)?，F(xiàn)在流行大標(biāo)題導(dǎo)航欄設(shè)計(jì)，也就是加大導(dǎo)航欄的高度，融入頁面內(nèi)容的標(biāo)題，當(dāng)內(nèi)容上滑時(shí)，大標(biāo)題再回歸到常規(guī)導(dǎo)航高度。（大標(biāo)題導(dǎo)航欄的高度一般為116pt（232px），這里包括了20pt（40px）狀態(tài)欄的高度，同時(shí)也能放得下34pt（68px）的大標(biāo)題和輔助信息（如返回等圖標(biāo)）。

導(dǎo)航欄中的元素必須遵守如下幾個(gè)對齊原則:

1、返回按鈕必須在左邊對齊。

2、當(dāng)前界面的標(biāo)題必須在導(dǎo)航欄正中。（可無）

3、其他控制按鈕必須在右邊對齊。

四、標(biāo)簽欄（具體尺寸見五點(diǎn)二圖）

標(biāo)簽欄：即Tab欄，為底部快速入口，iOS規(guī)范中Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式。分為“純圖標(biāo)標(biāo)簽”和“圖標(biāo)加文字標(biāo)簽”兩種形式。

五、iTunes 上傳頁面

在程序上傳App Store時(shí)我們需要提供多張App截圖，供用戶了解APP的功能。這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。也支持視頻形式。（微信目前采用的是五張靜態(tài)頁面形式）

微信iTunes上傳用截圖 

六、 字體

中文字體：PingFang SC，英文字體：SF UI Text 、SF UI Display，其中SF UI Text適用與小于19pt的文字，SF UI Display適用于大于20pt的文字。

鏈接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35

七、色彩

在iPhone上顯示的色域要比我們作圖時(shí)的RGB色域要廣。所以在iPhone上設(shè)計(jì)怎樣的顏色都可以，只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論范圍內(nèi)。官方建議的系統(tǒng)色彩如下：

iPhone的系統(tǒng)色

八、控件

控件包括：輸入框、按鈕、滑桿、頁卡、開關(guān)等，在設(shè)計(jì)模板中已經(jīng)全部列出。（下載地址：https://developer.apple.com/design/resources/）為了讓設(shè)計(jì)更符合整體產(chǎn)品品牌調(diào)性，這些控件可以做二次設(shè)計(jì)。

但得注意兩件事：第一，點(diǎn)擊區(qū)域基本符合44pt（88px）原則，也就是在手機(jī)上大小大概是7mm-9mm，適合手指點(diǎn)擊。第二，要設(shè)計(jì)操作的不同狀態(tài)，不要只設(shè)計(jì)一種狀態(tài)。

默認(rèn)控件

控件中無處不在的44pt（88px）

之前我們介紹過，人手指點(diǎn)擊區(qū)域?yàn)?mm - 9mm，在@2x中就是44pt（88px）。蘋果的導(dǎo)航條、列表、工具欄都充滿了44pt（88px）這個(gè)神秘?cái)?shù)字。我們在設(shè)計(jì)時(shí)一定也要考慮到手指的點(diǎn)擊區(qū)域。

 無處不見的44pt（88px）

九、界面設(shè)計(jì)原則

1.邊距和間距（@2x）

在移動端頁面的設(shè)計(jì)中，頁面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的，一個(gè)頁面是否美觀、簡潔、通透和邊距、間距的設(shè)計(jì)規(guī)范緊密相連。

（1）全局邊距（iOS13，@2x）

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁面整體視覺效果的統(tǒng)一。在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計(jì)語言，全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身。

微信和支付寶的邊距都是32px。（@2x）

（2）卡片間距

在移動端頁面設(shè)計(jì)中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定，通常最小不低于16px，過小的間距會造成用戶緊張情緒，使用最多的間距是20px、24px、30px、40px，當(dāng)然間距也不宜過大，過大的間距會使界面變得松散，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些。

以iOS（750*1334px）為例，設(shè)置頁面卡片間距為70px，而通知中心承載了大量的信息，因此采用了較小的16px作為卡片的間距。

總結(jié)：卡片間距的設(shè)置是靈活多變的，一定要根據(jù)產(chǎn)品的氣質(zhì)和實(shí)際需求去設(shè)置，平時(shí)也可以多截圖測量一下各類APP的卡片間距都是怎么設(shè)置的，看的多了并融會貫通，卡片間距設(shè)置自然會更加合理，更加得心應(yīng)手。

（3）內(nèi)容間距

一款A(yù)PP除了各種欄（狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄）和控件icon，就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來說一說內(nèi)容的間距設(shè)置問題。

格式塔鄰近性原則：

單個(gè)元素之間的相對距離會影響我們的感知，互相靠近的元素看起來屬于一組，而那些距離較遠(yuǎn)的則自動劃分組外。來看下圖，左圖中的圓在水平方向比垂直距離近，那么，我們看到了4排圓點(diǎn)，而右圖則看成4列。

在UI設(shè)計(jì)中內(nèi)容布局時(shí)，一定要重視鄰近性原則的運(yùn)用 

2.內(nèi)容布局

在APP的設(shè)計(jì)中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

（1）列表式布局

列表式布局方式非常普遍，隨便打開一個(gè)APP，基本都存在這種布局方式。特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動的手勢能獲得大量的信息反饋。這也是一種非常容易理解的展示形式。

（2）卡片式布局

這種布局形式相對靈活。其特點(diǎn)在于每張卡片的內(nèi)容和形式相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁面中出現(xiàn)不同的卡片承載不同的內(nèi)容?？ㄆ讲季窒鄬r(shí)尚、前衛(wèi)，很多to C產(chǎn)品經(jīng)常用到。另外，雙欄卡片的布局形式，也常見于以圖片信息為主導(dǎo)的App，例如一些商城的商品陳列頁面。這種形式能在一屏里顯示更多的內(nèi)容（至少4張），同時(shí)，由于分開左右兩欄的顯示，用戶可以更加方便地對比左右兩欄卡片的內(nèi)容。

3.界面圖片設(shè)計(jì)比例

在UI設(shè)計(jì)中，對于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺設(shè)置一個(gè)看起來不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。

4.APP版式設(shè)計(jì)規(guī)范

版式設(shè)計(jì)又叫做版面編輯，即在有限的版面空間里，將版面的構(gòu)成要素（文字、圖片、控件）根據(jù)特定的內(nèi)容進(jìn)行組合排列。一個(gè)優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，在UI設(shè)計(jì)中版面設(shè)計(jì)的基礎(chǔ)原則有哪些呢？

（1）對齊

對齊是貫穿版式設(shè)計(jì)最基礎(chǔ)，最重要的原則之一，它能建立起一種整齊規(guī)矩的外觀，帶給用戶有序一致的瀏覽體驗(yàn)。

（2）對稱

對稱是對立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出一種和諧自然的美，在應(yīng)用界面的設(shè)計(jì)中，引導(dǎo)頁設(shè)計(jì)、注冊登錄輸入框和按鈕等無一不是對稱的設(shè)計(jì)。

（3）分組

物以類聚，人以群分。分組是將同類別的信息組合在一起，直觀的呈現(xiàn)在用戶面前，這樣的設(shè)計(jì)能夠減少用戶的認(rèn)知負(fù)擔(dān)，在移動端界面的設(shè)計(jì)中最常見的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗(yàn)。

十、切圖命名規(guī)范

切圖最后需要命名成規(guī)范格式，方便程序員查找。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點(diǎn)簡單的詞匯量。借由上述工具切圖后，需要整理切圖命名，或在切圖之前對圖層命名亦可。以下是切圖元素的中英文對照：

切圖命名對照表

然后我們要按照”功能_類型_名稱_狀態(tài)@倍數(shù)”來命名每個(gè)切圖，比如我們導(dǎo)航條上有一個(gè)搜索圖標(biāo)，那么它的名稱就是： 

navi_icon_search_default@2x.png

(導(dǎo)航_圖標(biāo)_搜索_正常@2x.png)

Android設(shè)計(jì)規(guī)范

接下來，再一起來看看Android設(shè)計(jì)規(guī)范，這里只是把安卓規(guī)范中一些關(guān)鍵信息做了匯總，更詳細(xì)的不過多贅述，網(wǎng)上已經(jīng)有很多大佬產(chǎn)出過此類文章，大家可自行搜索。

一、安卓開發(fā)單位是DP、SP

DP：安卓專用長度單位。

以160 DPI屏幕為標(biāo)注，則1DP=1PX

計(jì)算公式：dp x dpi/160=px

例：以720x1280px （320dpi）為例， 1dp x 320 dpi/160=2px

SP：安卓專用字體單位。

以160 DPI屏幕為標(biāo)注，則1SP=1PX

計(jì)算公式：sp x dpi/160=px

例：以720x1280px （320dpi）為例， 1sp x 320 dpi/160=2px

二、安卓設(shè)計(jì)尺寸：以1080x1920px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸

1.從中間尺寸向上、下適配，界面調(diào)整幅度最小，最方便適配。

2.大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸，會限制設(shè)計(jì)師的設(shè)計(jì)視角。

3.用主流尺寸來做設(shè)計(jì)稿尺寸，極大的提高了視覺還原和其他機(jī)型適配。

三、安卓圖標(biāo)尺寸

四、安卓字體

中文：思源黑體 / Noto Sans Han

英文：Roboto

大?。褐黝}文字 36-34px    正文 28-26px     提示文字 24-22px

鏈接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35

五、切圖規(guī)范

1.切圖尺寸必須為雙數(shù)

2.單像素的圖會出現(xiàn)邊緣模糊的情況

一般情況下，我們只需要提供3套切圖資源就可以滿足安卓工程師的適配，分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。

如何用iOS的設(shè)計(jì)稿適配安卓

現(xiàn)在絕大多數(shù)公司限于人力物力的限制，不能把iOS和安卓的設(shè)計(jì)稿全部執(zhí)行出來，因此就存在一稿兩用的情況；設(shè)計(jì)師以iOS版本的設(shè)計(jì)稿來適配安卓，下面我們來看一組有趣的數(shù)學(xué)換算題：

1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是說，1242*2208（iOS@3倍尺寸）與1080*1920（安卓尺寸）是可以等比縮放的，所以，iOS與Android的尺寸是可共用1242*2208px。因此，以iOS設(shè)計(jì)尺寸進(jìn)行設(shè)計(jì)是可以適配Android的。（前提是必須和安卓工程師溝通清楚）

另一種方式，就是把750×1334px等比例調(diào)整尺寸到安卓1080×1920px，對各個(gè)控件進(jìn)行微調(diào)，重新提供標(biāo)注（用dp標(biāo)注）。也就是需要提供兩套標(biāo)注，一套給iOS，一套給Android。

iOS開發(fā)語言

作為iOS開發(fā)工程師，最重要的三個(gè)工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語言；而Swift開發(fā)非常。一般iOS工程師會在這兩個(gè)語言中選擇一種作為開發(fā)工具。UIKit是蘋果系統(tǒng)自帶的一套框架，這個(gè)框架里有設(shè)置按鈕、滑竿、狀態(tài)欄、電池電量、鍵盤等接口可供調(diào)用。所以我們看到很多第三方APP的界面中，有許多控件和蘋果自帶程序是一致的，這就是UIKit的功勞。

iOS開發(fā)里單位是pt

750×1334尺寸的換算關(guān)系 1pt=2px，也就是說程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是pt了。（這也是為什么建議設(shè)計(jì)師用@1倍圖做設(shè)計(jì)稿的原因）

轉(zhuǎn)自：站酷-蝸牛和筆

靜電說：它來啦！前一段時(shí)間傳的沸沸揚(yáng)揚(yáng)的蘋果與微信黑暗模式的糾葛，終于以微信適配iOS端告終。3月22日靜電一覺醒來，微信已經(jīng)正式開啟了“暗黑”模式。不過，很多人也許發(fā)現(xiàn)不了，因?yàn)槭謾C(jī)白天還是淺色模式，只有到晚上才會改為黑暗模式。

首先，你必須更新到iOS端的微信7.0.12版本。然后，在白天，只有你手工開啟了“設(shè)置”>“顯示與亮度” 菜單下的深色模式，它才有效果。至于安卓用戶，截止3月22日文章發(fā)布的時(shí)間，官網(wǎng)依然沒有更新。安卓的小伙伴就再等等吧。開啟后效果如下：

這次的改動可以說是很全面的，幾乎所有的界面都進(jìn)行了調(diào)整，包括聊天窗口，朋友圈文章，微信游戲，幫助頁面，看一看等等，但是微信小程序則依賴開發(fā)者的適配，目前來看，還都是白色的。

不少小伙伴對于黑暗模式的設(shè)計(jì)還不是特別熟悉，接下來咱們通過微信設(shè)計(jì)細(xì)節(jié)的分析，來看看小伙伴們都能從微信的改變上學(xué)到什么？

請注意，以上內(nèi)容為截圖取色，可能存在不準(zhǔn)的情況。但是可以看到，微信在Tab背景上并不是使用的純白或者純黑色。 在Tint顏色上，亮色模式和暗色模式的顏色也不一樣，這符合iOS 13 黑暗模式設(shè)計(jì)的規(guī)則定義。一般來說Tint顏色，黑暗模式下更亮一點(diǎn)。（左側(cè)色卡為淺色模式，右側(cè)為深色模式，下同）

另外，以上取色均沒有考慮透明度，在實(shí)際應(yīng)用中需要考慮透明度的使用。而對于Tab背景來說，亮色模式和黑暗模式均沿用透明毛玻璃效果。

左側(cè)色卡為淺色模式，右側(cè)為深色模式，均沒有考慮透明度影響。

在聊天列表，通訊錄列表頁面，系統(tǒng)圖標(biāo)在兩種模式下的顏色均保持一致，未做改變。

但在發(fā)現(xiàn)頁面中，列表左側(cè)的icon顏色則有略微變化?？傮w來說，黑暗模式下比亮色模式下的圖標(biāo)顏色更“亮”。是不是這里比較拗口？也就是下圖中，右側(cè)比左側(cè)的圖標(biāo)，亮度提升啦！

支付界面中的圖標(biāo)，處理方式同上邊一樣，右圖比左圖的圖標(biāo)亮度要高一些。但是下圖中綠色的大色塊，顏色卻一致。

而文章背景顏色，亮色模式為#FEFFFF，黑暗模式為#232323，可見也不是完全的純白和純黑色。另外，想在黑暗模式上貼各種表情的作者可要注意了，你的GIF表情可能會變成上圖那樣？ 就像在黑色背景下開了個(gè)白色天窗！一大波白色不透明GIF圖即將失效！

朋友圈界面的背景色和點(diǎn)睛色均發(fā)生了變化，在黑暗模式下，發(fā)廣告還是美麗的照片，用戶的關(guān)注程度都會提升，當(dāng)然，不好看的圖片，也會把缺點(diǎn)放更大。所以讓你的照片更吸引人吧。

聊天頁面中相應(yīng)的Tint色也有變化。另外，請注意，背景色依然不是純白色和純黑色。而微信的設(shè)計(jì)師傾向于使用#FEFFFF而不是#FFFFFF，雖然這倆顏色相差幾乎為零，肉眼不可分辨。是不是這位設(shè)計(jì)師有某種潔癖？或者是純粹弄錯(cuò)了？

關(guān)于聊天時(shí)使用的透明動圖，其實(shí)仔細(xì)看還是有不少毛邊的，之前我們也做過相關(guān)的分析文章。因?yàn)檫@種情況單純使用256色的GIF效果已經(jīng)非常差了。具體實(shí)現(xiàn)方式可以看另一篇文章：不要大白邊！聊聊GIF動畫毛邊的處理方法（評論發(fā)送）。以免出現(xiàn)像下面的情況：

彈層顏色在兩種模式下顏色沒有發(fā)生變化，搜索框顏色在針對黑暗模式設(shè)計(jì)時(shí)，可以考慮在白色基礎(chǔ)上進(jìn)行透明度處理。

· 一般情況下Tint顏色，在黑暗模式要比淺色模式要亮，請注意，不管是圖標(biāo)還是點(diǎn)睛的顏色。

· 蘋果的設(shè)計(jì)指南中建議背景色為純黑色，但是真正實(shí)踐過程中，沒必要完全遵循，可以用一定灰度的顏色替代。

· 使用具有透明度的圖標(biāo)和文字，在亮色模式轉(zhuǎn)黑暗模式的時(shí)候會更加輕松

· 不管你使用怎樣的顏色，請確保黑暗模式下的設(shè)計(jì)元素具有足夠的可讀性，同時(shí)兼顧美觀。

· 黑暗模式下的層級設(shè)計(jì)與亮色模式不同，陰影在黑暗模式下沒有太多作用。

· 當(dāng)發(fā)布一個(gè)大版本的APP更新時(shí)，可以進(jìn)行分渠道投放，讓一部分先用上新版本，并測試其反饋結(jié)果，進(jìn)而再進(jìn)行全渠道的投放，可以最大限度降低被用戶吐槽的風(fēng)險(xiǎn)。

轉(zhuǎn)自：站酷-靜design

在Swift開發(fā)文檔中是這樣介紹閉包的：閉包是可以在你的代碼中被傳遞和引用的功能性獨(dú)立模塊。

Swift閉包

閉包的形式

Swift中的閉包有很多優(yōu)化的地方

創(chuàng)建基本的閉包

在閉包中接收參數(shù)

從閉包中返回值

閉包作為參數(shù)

尾隨閉包語法

值捕獲

逃逸閉包

閉包的形式

全局函數(shù) 嵌套函數(shù) 閉包表達(dá)式

有名字但不能捕獲任何值。 有名字，也能捕獲封閉函數(shù)內(nèi)的值。 無名閉包，使用輕量級語法，可以根據(jù)上下文環(huán)境捕獲值。

Swift中的閉包有很多優(yōu)化的地方

根據(jù)上下文推斷參數(shù)和返回值類型



從單行表達(dá)式閉包中隱式返回（也就是閉包體只有一行代碼，可以省略return）



可以使用簡化參數(shù)名，如$0, $1(從0開始，表示第i個(gè)參數(shù)…)



提供了尾隨閉包語法(Trailing closure syntax)



閉包是引用類型：無論你將函數(shù)或閉包賦值給一個(gè)常量還是變量，你實(shí)際上都是將常量或變量的值設(shè)置為對應(yīng)函數(shù)或閉包的引用



創(chuàng)建基本的閉包

let bibao = {

  print("我要創(chuàng)建閉包")

}



上面的代碼實(shí)際上創(chuàng)建了一個(gè)匿名的函數(shù)，并將這個(gè)函數(shù)賦給了 driving。之后你就可以把 driving() 當(dāng)作一個(gè)常規(guī)的函數(shù)來用，就像這樣：



bibao()



在閉包中接收參數(shù)

當(dāng)你創(chuàng)建閉包的時(shí)候，它們并沒有名字，也沒有提供書寫參數(shù)的地方。但這并不意味著它們不能接收參數(shù)，只不過它們接收參數(shù)的方式稍有不同：這些參數(shù)是被寫在 花括號里面的。



為了讓一個(gè)閉包接收參數(shù)，你需要在花括號之后把這些參數(shù)列出來，然后跟上一個(gè) in 關(guān)鍵字。這樣就告訴Swift，閉包的主體是從哪里開始的。



舉個(gè)例子，我們來創(chuàng)建一個(gè)閉包，接收一個(gè)叫 place 的字符串作為唯一的參數(shù)，就像這樣：



let bibao= { (bao1: String) in

  print("我要創(chuàng)建 (bao1)。")

}



函數(shù)和閉包的一個(gè)區(qū)別是運(yùn)行閉包的時(shí)候你不會用到參數(shù)標(biāo)簽。因此，調(diào)用 driving() 的時(shí)候，我們是這樣寫的：



bibao("閉包")



從閉包中返回值

閉包也能返回值，寫法和閉包的參數(shù)類似：寫在閉包內(nèi)部， in 關(guān)鍵字前面。



還是以 driving() 閉包為例， 讓它返回一個(gè)字符串。原來的函數(shù)是這樣的：



let bibao= { (bao1: String) in

  print("我要創(chuàng)建  (bao1)。")

}



改成返回字符串而不是直接打印那個(gè)字符串，需要 in 之前添加 -> String，然后像常規(guī)函數(shù)那樣用到 return 關(guān)鍵字:



let drivingWithReturn = { (bao1: String) -> String in

  return "我要創(chuàng)建 (bao1)。"

}



現(xiàn)在我們運(yùn)行這個(gè)閉包并且打印出它的返回值：



let message = drivingWithReturn("閉包")

print(message)



閉包作為參數(shù)

既然閉包可以像字符串和整數(shù)一樣使用，你就可以將它們傳入函數(shù)。閉包作為參數(shù)的語法乍一看一看挺傷腦筋的，讓我們慢慢來。



首先，還是基本的 driving() 閉包。



let driving = {

  print("我正在創(chuàng)建")

}



如果我們打算把這個(gè)閉包傳入一個(gè)函數(shù)，以便函數(shù)內(nèi)部可以運(yùn)行這個(gè)閉包。我們需要把函數(shù)的參數(shù)類型指定為 () -> Void。 它的意思是“不接收參數(shù)，并且返回 Void”。在Swift中，Void是什么也沒有的意思。



好了，讓我們來寫一個(gè) travel() 函數(shù)，接收不同類型的 traveling 動作， 并且在動作前后分別打印信息：



func travel(action: () -> Void) {

  print("我準(zhǔn)備創(chuàng)建")

  action()

  print("我建好了")

}



現(xiàn)在可以用上 driving 閉包了，就像這樣：



travel(action: driving)

1

尾隨閉包語法

如果一個(gè)函數(shù)的最后一個(gè)參數(shù)是閉包，Swift允許你采用一種被稱為 “拖尾閉包語法” 的方式來調(diào)用這個(gè)閉包。你可以把閉包傳入函數(shù)之后的花括號里，而不必像傳入?yún)?shù)那樣。



又用到我們的 travel() 函數(shù)了。它接收一個(gè) action 閉包。閉包在兩個(gè) print() 調(diào)用之間執(zhí)行:



func travel(action: () -> Void) {

  print("我準(zhǔn)備創(chuàng)建")

  action()

  print("我建好了")

}



由于函數(shù)的最后一個(gè)參數(shù)是閉包，我們可以用拖尾閉包語法來調(diào)用 travel() 函數(shù)，就像這樣：



travel() {

  print("我要創(chuàng)建閉包")

}



實(shí)際上，由于函數(shù)沒有別的參數(shù)了，我們還可以將圓括號完全移除：



travel {

  print("我要創(chuàng)建閉包")

}



拖尾閉包語法在Swift中非常常見，所以要加深印象。



值捕獲

閉包可以在其被定義的上下文中捕獲常量或變量。即使定義這些常量和變量的原作用域已經(jīng)不存在，閉包仍然可以在閉包函數(shù)體內(nèi)引用和修改這些值。

Swift 中，可以捕獲值的閉包的最簡單形式是嵌套函數(shù)，也就是定義在其他函數(shù)的函數(shù)體內(nèi)的函數(shù)。嵌套函數(shù)可以捕獲其外部函數(shù)所有的參數(shù)以及定義的常量和變量。

官方文檔例子：



 func makeIncrementer(forIncrement amount: Int) -> () -> Int {

     var runningTotal = 0

     func incrementer() -> Int {

         runningTotal += amount

        return runningTotal

     }

     return incrementer

 }

 //運(yùn)行結(jié)果：

 let one = makeIncrementer(forIncrement: 10)

print(one())  //10

print(one())  //20



let two = makeIncrementer(forIncrement: 10)

print(two())  //10

print(two())  //20



逃逸閉包

當(dāng)一個(gè)閉包作為參數(shù)傳到一個(gè)函數(shù)中，但是這個(gè)閉包在函數(shù)返回之后才被執(zhí)行，我們稱該閉包從函數(shù)中逃逸。當(dāng)你定義接受閉包作為參數(shù)的函數(shù)時(shí)，你可以在參數(shù)名之前標(biāo)注 @escaping，用來指明這個(gè)閉包是允許“逃逸”出這個(gè)函數(shù)的。（默認(rèn)值：@noescaping）

官方文檔例子：



var completionHandlers: [() -> Void] = []

func someFunctionWithEscapingClosure(completionHandler: @escaping () -> Void) {

    completionHandlers.append(completionHandler)

}



如上面例子，加入標(biāo)注@escaping即可表明這個(gè)閉包是允許逃逸的



以上就是我對Swift閉包的淺薄認(rèn)知，如果有細(xì)節(jié)錯(cuò)誤請指出，也可以查閱官方文檔，鏈接在下面教程更為詳細(xì)。

就是這樣啦，愛你們么么么~~

在我們寫頁面時(shí)，

瀏覽器緩存問題

有時(shí)會發(fā)現(xiàn)自己寫的css樣式無法生效，導(dǎo)致這種現(xiàn)象的原因有很多，下面列舉一些常見的原因希望可以幫到你，歡迎評論區(qū)補(bǔ)充。

如果你反復(fù)檢查認(rèn)為代碼沒有問題，那么可能是瀏覽器緩存的問題。在排查前先試一下清除瀏覽器緩存，重啟瀏覽器或者換個(gè)瀏覽器等手段，無效后再進(jìn)行進(jìn)一步排查。有可能自己什么都沒有做錯(cuò)，就是因?yàn)榫彺婊蛘邽g覽器的問題導(dǎo)致，重置一下也許問題就解決了。
瀏覽器的‘F12’元素審核，看看哪些樣式?jīng)]有應(yīng)用上。

細(xì)節(jié)問題

寫錯(cuò)屬性名致使無法與html匹配，或?qū)傩灾挡环弦?guī)范；



html標(biāo)簽沒寫完整，漏了“<”或者”>”等；



，；｛｝看看這些符號是不是不小心使用了中文或者全角符號；



<span>設(shè)CSS樣式不起作用:例如：要定義span居中，必須先讓span成塊級元素顯示，也就是說，要先定義span的display:block;屬性，然后再給span添加邊距屬性margin:0px auto;



css樣式中間沒有加分號；

為什么css樣式里有時(shí)候使用分號隔開有時(shí)候是用空格呢？

對同一個(gè)屬性進(jìn)行設(shè)置時(shí)是用空格隔開，比如border:1px solid red; 對不同的屬性進(jìn)行設(shè)置時(shí)是用分號隔開，比如width:300px;height:300px;

樣式表關(guān)聯(lián)問題

如果你的樣式完全不生效，首先確認(rèn)關(guān)聯(lián)了樣式表沒有，或者關(guān)聯(lián)的樣式位置、名字是否正確；

<link rel="stylesheet" type="text/css" href="mycss.css"/>

看看自定義的CSS樣式引入標(biāo)簽是否放在bootstrap框架樣式引用之后，確保不會被在加載頁面時(shí)被框架的樣式覆蓋。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mycss.csvs"/>

選擇器問題

后代子代選擇等，涉及多個(gè)標(biāo)簽，類名、id等，子選擇器的順序、名字等寫錯(cuò)了，均可能導(dǎo)致出錯(cuò)；

html里的標(biāo)簽忘記寫類名、id了，而選擇器用了這些漏寫的類名、id等，樣式自然不會生效。

后代選擇器忘了寫空格；

看看是不是有多余的空格比如： div.box{} 這類選擇器會不會寫成了 div .box{}；

編碼格式問題

把CSS、HTML網(wǎng)頁文件都統(tǒng)一保存為UTF-8格式；即在頭標(biāo)簽中添加<meta charset="UTF-8">

因?yàn)?一般網(wǎng)頁里采用UTF-8的編碼格式，而外部的CSS文件默認(rèn)的是ANSI的編碼格式，一般情況下是不會有問題。然而當(dāng)CSS文件中包含中文注釋，就可能會出現(xiàn)問題。

樣式層疊問題

Vue中如何監(jiān)控某個(gè)屬性值的變化？

比如現(xiàn)在需要監(jiān)控data中，obj.a 的變化。Vue中監(jiān)控對象屬性的變化你可以這樣：



watch: {

      obj: {

      handler (newValue, oldValue) {

        console.log('obj changed')

      },

      deep: true

    }

  }



deep屬性表示深層遍歷，但是這么寫會監(jiān)控obj的所有屬性變化，并不是我們想要的效果，所以做點(diǎn)修改：



watch: {

   'obj.a': {

      handler (newName, oldName) {

        console.log('obj.a changed')

      }

   }

  }



還有一種方法，可以通過computed 來實(shí)現(xiàn)，只需要：



computed: {

    a1 () {

      return this.obj.a

    }

}



利用計(jì)算屬性的特性來實(shí)現(xiàn)，當(dāng)依賴改變時(shí)，便會重新計(jì)算一個(gè)新值。

HTML基礎(chǔ)知識

1. HTML的歷史：HTML，XHTML
2. HTML的全局屬性：全局標(biāo)準(zhǔn)屬性，全局事件屬性

3. HTML的元素：

4. 

5. 

4. 標(biāo)記語言，是一種將文本以及與文本相關(guān)的其他信息結(jié)合起來，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。
5. HTML，為超文本標(biāo)記語言。
6. XHTML是可擴(kuò)展超文本標(biāo)記語言，是一種更純潔，更嚴(yán)格，更規(guī)范的html代碼。
7. html文件由文件頭和文件體兩部分組成。

8. 標(biāo)簽的分類：雙標(biāo)簽，單標(biāo)簽。

HTML的全局標(biāo)準(zhǔn)屬性
在HTML中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性。

class用于定義元素的類名。
id用于指定元素的唯一id。
style用于指定元素的行內(nèi)樣式。
title用于指定元素的額外信息。
accesskey用于指定激活某個(gè)元素的快捷鍵。
支持accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab鍵下的次序。
支持tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中內(nèi)容的文本方向。
dir的屬性值只有l(wèi)tr和rtl兩種，分別是left to right和right to left。

lang用于指定元素內(nèi)容的語言。
HTML的全局事件屬性
Window窗口事件
onload，在頁面加載結(jié)束后觸發(fā)。
onunload，在用戶從頁面離開時(shí)觸發(fā)，如單擊跳轉(zhuǎn)，頁面重載，關(guān)閉瀏覽器窗口等。
Form表單事件
onblur，當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
onchange，在元素的元素值被改變時(shí)觸發(fā)。
onfocus，在元素獲得焦點(diǎn)時(shí)觸發(fā)。
onreset，當(dāng)表單中的重載按鈕被點(diǎn)擊時(shí)觸發(fā)。
onselect，在元素中文本被選中后觸發(fā)。
onsubmit，在提交表單時(shí)觸發(fā)。
Keyboard鍵盤事件
onkeydown，在用戶按下按鍵時(shí)觸發(fā)。
onkeypress，在用戶按下按鍵后，按著按鍵時(shí)觸發(fā)。
該屬性不會對所有按鍵生效，不生效按鍵如：alt，ctrl，shift，esc。

onkeyup，當(dāng)用戶釋放按鍵時(shí)觸發(fā)。
Mouse鼠標(biāo)事件
onclick，當(dāng)在元素上單擊鼠標(biāo)時(shí)觸發(fā)。
onblclick，當(dāng)在元素上雙擊鼠標(biāo)時(shí)觸發(fā)。
onmousedown，當(dāng)在元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)。
onmousemove，當(dāng)鼠標(biāo)指針移動到元素上時(shí)觸發(fā)。
onmouseout，當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)。
onmouseover，當(dāng)鼠標(biāo)指針移動到元素上時(shí)觸發(fā)。
onmouseup，當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā)。
Media媒體事件
onabort，當(dāng)退出媒體播放器時(shí)觸發(fā)。
onwaiting，當(dāng)媒體已停止播放但打算繼續(xù)播放時(shí)觸發(fā)。
HTML元素

1. <!DOCTYPE>，聲明文檔類型。
2. <html>，HTML元素真正的根元素。
3. <head>，定義html文檔的文檔頭。

head中包含的元素

title，定義HTML文檔的標(biāo)題
base，為頁面上的所有鏈接規(guī)定默認(rèn)地址或者默認(rèn)目標(biāo)
link，用于定義文檔與外部資源之間的關(guān)系
meta，提供關(guān)于HTML的元數(shù)據(jù)
style，用于為HTML文檔定義樣式信息
script，用于定義客戶端腳本

4. body，定義html文檔的文檔體。
5. content-Type，用于設(shè)定網(wǎng)頁的字符集，便于瀏覽器解析與渲染頁面。

cache-control，用于告訴瀏覽器如何緩存某個(gè)響應(yīng)及緩存多長時(shí)間。

參數(shù)：



no-cache，發(fā)送請求，與服務(wù)器確認(rèn)該資源是否被更改，如果沒有，則使用緩存



no-store，允許緩存，每次都要去服務(wù)器上下載完整的響應(yīng)



public，緩存所有響應(yīng)



private，只為單個(gè)用戶緩存



max-age，表示當(dāng)前請求開始，相應(yīng)響應(yīng)在多久內(nèi)能被緩存和重用，不去服務(wù)器重新請求，max-age=60表示響應(yīng)可以再緩存和重用60秒



<meta http-equiv=cache-control" content="no-cache">

1

expires，用于設(shè)定網(wǎng)頁的到期時(shí)間，過期后重新到服務(wù)器上重新傳輸。

refresh，網(wǎng)頁將在設(shè)定的時(shí)間內(nèi)，自動刷新并轉(zhuǎn)向設(shè)定的網(wǎng)址

Set-Cookie，用于設(shè)置網(wǎng)頁過期。

無語義元素：<span>,<div>，<span>是內(nèi)聯(lián)標(biāo)簽，用在一行文本中，<div>是塊級標(biāo)簽。



div用于存放需要顯示的數(shù)據(jù)，css用于指定如何顯示數(shù)據(jù)樣式，做到結(jié)構(gòu)與樣式相互分離。



查看div+css樣式HTML:點(diǎn)擊下方鏈接跳轉(zhuǎn)，可查看源碼：



div-css.html



格式化元素

普通文本

<b>，定義粗體文本

<big>，定義大號字

<em>，定義著重文字

<i>，定義斜體字

<small>，定義小號字

<strong>，定義加重語氣

<sub>，定義下標(biāo)字

<sup>，定義上標(biāo)字

<ins>，定義插入字

<del>，定義刪除字

計(jì)算機(jī)輸出

<code>，定義計(jì)算機(jī)代碼

<kbd>，定義鍵盤輸出樣式

<samp>，定義計(jì)算機(jī)代碼樣本

<tt>，定義打字機(jī)輸入樣式

<pre>，定義預(yù)格式文本

術(shù)語

<abbr>，定義縮寫

<acronym>，定義首字母縮寫

<address>，定義地址

<bdo>，定義文字方向

<blockquote>定義長的引用

<q>，定義短的引用語

<cite>，定義引用，引證

<dfn>，定義一個(gè)概念，項(xiàng)目





圖像熱區(qū)鏈接

圖像熱區(qū)鏈接，是什么呢？當(dāng)你在看一些購物網(wǎng)頁的時(shí)候，一張圖片上，可以在不同的地方鏈接到不同的目標(biāo)位置，點(diǎn)擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁，這也是做商城項(xiàng)目一般要用到的技術(shù)。



這個(gè)時(shí)候不是<a>標(biāo)簽元素了，而是<area>元素。



<area>元素的屬性有兩個(gè)shape，cords屬性。

<area>的坐標(biāo)系，原點(diǎn)為圖片的左上角,x軸正方向向右，y軸正方向向下

我畫個(gè)圖哈，反映<area>的坐標(biāo)系：

圖像熱區(qū)鏈接的使用，<map>標(biāo)簽定義一個(gè)image-map，可以含一個(gè)以上的熱區(qū)<area>，每個(gè)熱區(qū)都有獨(dú)立的鏈接。

要為<map>標(biāo)簽賦予name屬性。

將<img>標(biāo)簽的usemap屬性與<map>標(biāo)簽的name屬性相關(guān)聯(lián)。

為了證明我學(xué)會了，我寫一個(gè)html頁面。

map -> name="image_link"

img -> usemap="#image_link"
1
點(diǎn)擊跳轉(zhuǎn)：imgmap.html

e-mail鏈接
e-mail鏈接主要是看到有很多官方網(wǎng)頁需要做的一個(gè)打開一封新的電子郵件。

點(diǎn)擊下方鏈接即可看到效果：

聯(lián)系我們

代碼：

<a href="mailto:xxxxxx@qq.com">聯(lián)系我們</a>



列表元素
整合列表html網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：ul-ol.html

無序列表，<ul>定義無序列表，<li>定義列表項(xiàng)。
<ul>的type屬性值：disc點(diǎn)，square方塊，circle圓，none無.

有序列表，<ol>定義有序列表，<li>定義列表項(xiàng)。
<ol>的type屬性值：數(shù)字，大寫字母，大寫羅馬數(shù)字，小寫字母，小寫羅馬數(shù)字。

start屬性定義序號的開始位置。

定義列表<dl>，定義列表內(nèi)部可以有多個(gè)列表項(xiàng)標(biāo)題，每個(gè)列表項(xiàng)標(biāo)題用<dt>標(biāo)簽定義，列表項(xiàng)標(biāo)題內(nèi)部又可以有多個(gè)列表項(xiàng)描述，用<dd>標(biāo)簽定義。
表格
整合表格html網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：table.html

<table>定義表格
<caption>定義表格標(biāo)題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個(gè)標(biāo)簽。

7. <td>的兩個(gè)屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列
8. <tbody>,<thead>,<tfoot>標(biāo)簽通常用于對表格內(nèi)容進(jìn)行分組。
9. 表單由<form>標(biāo)簽定義，action屬性定義了表單提交的地址，method屬性定義表單提交的方式。

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden"> 

<textarea>元素

<textarea>標(biāo)簽具有name,cols,rows3個(gè)屬性。

1. name用于提交參數(shù)
2. value用于輸入文本內(nèi)容
3. cols和rows分別用于文本框的列數(shù)和行數(shù)，寬度和高度。

效果：

自我評價(jià)：

代碼：

<form action="web" method="post">
 自我評價(jià)：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>

frameset

1. <frameset>定義一個(gè)框架集，用于組織多個(gè)窗口，每個(gè)框架存有獨(dú)立的html文檔
2. <frameset>不能與<body>共同使用，除非有<noframe>元素
3. <frame>用于定義<frameset>中一個(gè)特定的窗口?？赵?code style="box-sizing:border-box;outline:0px;margin:0px;padding:2px 4px;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;overflow-wrap:break-word;"><frame/>

：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>frameset</title>
    </head>
    <frameset cols="25%,50%,25%">
        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
        <frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的瀏覽器無法處理框架，請更換瀏覽器打開</body>
    </noframes>
</html>
1

顯示結(jié)果 描述 實(shí)體名稱 實(shí)體編號
空格 &nbsp; &#160;
< 小于號 &lt; &#60;
> 大于號 &gt; &#62;
& 和號 &amp; &#38;
" 引號 &quot; &#34;
' 撇號 &apos; (IE不支持) &#39;
￠ 分（cent） &cent; &#162;
￡ 鎊（pound） &pound; &#163;
￥ 元（yen） &yen; &#165;
€ 歐元（euro） &euro; &#8364;
§ 小節(jié) &sect; &#167;
© 版權(quán)（copyright） &copy; &#169;
® 注冊商標(biāo) &reg; &#174;
? 商標(biāo) &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;
————————————————
版權(quán)聲明：本文為CSDN博主「達(dá)達(dá)前端」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_36232611/article/details/105109467

手把手教你 「如何 7 步從 0 ～ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過，設(shè)計(jì)風(fēng)格明確，用戶粘性高的軟件！」

據(jù)不完全了解，身邊大部分的 UI 同事都從 0 到 1 參與過一款或多款軟件的設(shè)計(jì)，設(shè)計(jì)過程中不知道你是否有過這樣的疑惑：

• 設(shè)計(jì)稿都做了 100 版了，但產(chǎn)品經(jīng)理還是不滿意，是我設(shè)計(jì)不行嗎？
• 產(chǎn)品目標(biāo)、用戶目標(biāo)都標(biāo)得清清楚楚了，但總是找不好設(shè)計(jì)關(guān)鍵詞，來來去去只會用「年輕化、輕量化」？
• 產(chǎn)品目標(biāo)明確了，設(shè)計(jì)關(guān)鍵詞也有了，但為什么做出來的稿子不是太概念，就是跟競品太像呢？

在解決這些困惑之后，我總結(jié)了一套自用的，適合從 0 ～ 1 進(jìn)行軟件設(shè)計(jì)或項(xiàng)目改版的方法 ，并在其他項(xiàng)目上進(jìn)行了二次驗(yàn)證。

以實(shí)踐項(xiàng)目 —— 有道少兒詞典為例，上線一年期間，用戶次日留存峰值 36% 以上，也非常幸運(yùn)，被 App Store Today 推薦 4 次，App Store 編輯推薦 8 次，被 App Store 納入 2019 本土優(yōu)秀 App 盤點(diǎn)中，同時(shí)被預(yù)裝到蘋果線下直營店，作為樣機(jī)體驗(yàn)軟件之一。所以，這個(gè)方法親測有效！

這篇文章，通過分析如何解決類似「產(chǎn)品經(jīng)理不滿意、設(shè)計(jì)關(guān)鍵詞不對、設(shè)計(jì)風(fēng)格無區(qū)別」這些問題，整理出 7 個(gè)幫你從 0 ～ 1 設(shè)計(jì)一款軟件的步驟。

文章較長，大概需要花費(fèi) 15 分鐘，建議大家先看大綱，優(yōu)先閱讀符合自身情況的部分。

產(chǎn)品經(jīng)理為什么不滿意？

從 0 ～ 1 進(jìn)行軟件設(shè)計(jì)，免不了要多出幾個(gè)設(shè)計(jì)稿，但做了 100 稿，產(chǎn)品經(jīng)理對頁面設(shè)計(jì)還是不滿意的話，很有可能有 2 點(diǎn)原因：

原因 1：目標(biāo)不明確

一拿到需求就開始做，很容易忽略需求背后的目標(biāo)，從 0 到 1 做一款新軟件更是要了解業(yè)務(wù)目標(biāo)和用戶目標(biāo)。

在提出解決辦法前，我們需要先捋清楚以下 2 個(gè)問題：

為什么要了解目標(biāo)？

公司開發(fā)軟件是為了達(dá)到某些目標(biāo)或是實(shí)現(xiàn)某個(gè)目的的，只有了解目標(biāo)才能更好地為公司創(chuàng)造價(jià)值。

什么是業(yè)務(wù)需求、業(yè)務(wù)目標(biāo)和用戶目標(biāo)？

平時(shí)產(chǎn)品經(jīng)理跟我們說，要設(shè)計(jì)一個(gè)頁面，設(shè)計(jì) 一個(gè)流程，這就是一個(gè)業(yè)務(wù)需求，而這個(gè)需求的背后，能夠解釋清楚這個(gè)需求是為了什么，要做到什么程度，這就是業(yè)務(wù)目標(biāo)（通常包括用什么手段，給用戶帶來什么價(jià)值，達(dá)到什么目的）。而軟件的目標(biāo)用戶，他們在一個(gè)具體的時(shí)間、地點(diǎn)、環(huán)境下做了什么操作，想達(dá)到什么程度，滿足自己的什么要求，這可以理解為用戶目標(biāo)。

解決辦法 ：多使用 「為什么+動詞」 的問法，向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶目標(biāo)。

從 0 ～1 做軟件需要了解的業(yè)務(wù)目標(biāo)和用戶目標(biāo)，我們都可以從產(chǎn)品經(jīng)理那里得到。

少兒詞典的產(chǎn)品經(jīng)理很早就給出了業(yè)務(wù)目標(biāo)和用戶目標(biāo)。但，當(dāng)我們需要更多細(xì)節(jié)的時(shí)候，可以使用「為什么+動詞」這樣的問法。例如：

• 「我們要做一個(gè)少兒查詞軟件，定位是一款擁有權(quán)威釋義背書，在視、聽、觸方面打造良好體驗(yàn)，緊扣教材和教學(xué)大綱的適合少兒和家長使用的伴學(xué)詞典。你來做吧！」「為什么做這個(gè)？」
• 「現(xiàn)在兒童教育KOL越來越多，很多家長都很關(guān)心k12教育問題。市面上的很多產(chǎn)品都不太適合孩子使用」
• 「為什么這樣的定位可以滿足用戶需求呢？」「為什么是適合少兒和家長使用呢？」
• 「為什么……」

在少兒詞典項(xiàng)目中

• 我們的業(yè)務(wù)目標(biāo)是：一款擁有權(quán)威釋義背書，在視、聽、觸方面打造良好體驗(yàn)，緊扣教材和教學(xué)大綱的適合少兒和家長使用的伴學(xué)詞典。
• 目標(biāo)用戶群體是：小學(xué) 1~6 年級的孩子和他們的家長。
• 用戶目標(biāo)是：當(dāng)小學(xué)低年級的孩子在家學(xué)習(xí)的時(shí)候，他們的家長需要一款軟件，能緩解家長伴學(xué)的壓力。高年級的孩子需要一款軟件，為他們提供準(zhǔn)確教學(xué)。

原因 2 ：沒有對產(chǎn)品關(guān)鍵詞形成共識

我們既了解產(chǎn)品的業(yè)務(wù)目標(biāo)，也知道用戶目標(biāo)的情況下，方案還是被 pass 的話，可能是因?yàn)槟憬o出的方案和產(chǎn)品經(jīng)理想要的不是同一個(gè)東西。為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢？怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么？我們可以用產(chǎn)品關(guān)鍵詞來回答這個(gè)問題。

為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢？

我們常見的業(yè)務(wù)目標(biāo)的內(nèi)容是很長的，用戶目標(biāo)的內(nèi)容也是很長的，在這種所有已知內(nèi)容都很長的情況下，如果沒有準(zhǔn)確理解內(nèi)容，沒有對重點(diǎn)內(nèi)容達(dá)成一致，就很容易產(chǎn)生偏差。例如我要向你描述一位美女，她的頭發(fā)很柔順，臉蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我們腦海中想的不是同一個(gè)美女。但是，如果我跟你說，這是一個(gè)跟芭比娃娃很像的美女的時(shí)候，我們腦海中的形象會接近很多。

怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么？

就像設(shè)計(jì)師在進(jìn)行頁面設(shè)計(jì)時(shí)，需要設(shè)計(jì)關(guān)鍵詞一樣，產(chǎn)品經(jīng)理在描述自己的業(yè)務(wù)目標(biāo)的時(shí)候，也需要能概括業(yè)務(wù)目標(biāo)重點(diǎn)，突出賣點(diǎn)的產(chǎn)品關(guān)鍵詞，這個(gè)產(chǎn)品關(guān)鍵詞能幫助設(shè)計(jì)師弄清楚產(chǎn)品經(jīng)理想要的東西。

部分產(chǎn)品經(jīng)理為了方便大家達(dá)成共識，會早早亮出產(chǎn)品關(guān)鍵詞，如果當(dāng)你們的產(chǎn)品經(jīng)理沒有辦法提供產(chǎn)品關(guān)鍵詞的時(shí)候，我們要學(xué)會在討論中找到。

解決辦法 ：從業(yè)務(wù)目標(biāo)開始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞

從業(yè)務(wù)目標(biāo)和用戶目標(biāo)開始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，在討論的過程中，我們可以留意產(chǎn)品多次提到的幾個(gè)形容詞，寫下來，然后跟產(chǎn)品反復(fù)核對確認(rèn)，最后雙方確認(rèn)且保留下來的這 3～4 個(gè)形容詞，就是這個(gè)項(xiàng)目的產(chǎn)品關(guān)鍵詞。

少兒詞典的產(chǎn)品關(guān)鍵詞是：權(quán)威內(nèi)容，寓教于樂，適合孩子使用。這些關(guān)鍵詞被我貼在屏幕的顯眼處，就怕自己哪天忘記了。

設(shè)計(jì)關(guān)鍵詞為什么總是找不對

尋找設(shè)計(jì)關(guān)鍵詞，是設(shè)計(jì)師非常熟悉的步驟，但常常也在這里翻車，甚至還會出現(xiàn)，不管做什么軟件，反反復(fù)復(fù)就那幾個(gè)關(guān)鍵詞的情況，我們可以把原因歸結(jié)為：

原因：對用戶不夠了解

為什么不了解用戶會導(dǎo)致關(guān)鍵詞找不對？

我們的用戶在選擇軟件、使用軟件的時(shí)候，了解到的是軟件的設(shè)計(jì)、體驗(yàn)和功能。用戶下載軟件時(shí)，他們已有的認(rèn)知會影響他們對軟件的幻想。就像給小男孩的衣服是天藍(lán)色，小女孩的衣服是嫩粉色一樣，如果用戶想要一件天藍(lán)色的衣服，而我們給他展示的是深藍(lán)色或是嫩粉色的衣服，這都會讓用戶產(chǎn)生疑惑甚至離開。因此，如果對用戶了解不準(zhǔn)確，會導(dǎo)致我們輸出錯(cuò)誤的設(shè)計(jì)關(guān)鍵詞。

而了解目標(biāo)用戶是又一件復(fù)雜的事情。

首先，我們的目標(biāo)用戶可能是一類人，如有道詞典，下載軟件用戶和使用用戶大概率是同一個(gè)人。目標(biāo)用戶也有可能是兩類人或是更多，如少兒詞典，下載用戶是家長，使用用戶是家長和孩子，企業(yè)協(xié)作軟件也類似。

從接觸軟件，下載軟件，使用軟件，到判斷是否繼續(xù)使用軟件，不同的階段的目標(biāo)用戶是不一樣的，目標(biāo)用戶在不同階段的需求也是不一樣的。

其次，開發(fā)軟件的周期是很長的，在開發(fā)軟件的過程中，我們的用戶在不斷地接收新的知識和觀點(diǎn)，用戶的喜好，認(rèn)知可能會發(fā)生很大的變化。

因此，為了更好地了解用戶，我們需要找到用戶跟軟件之間的交互關(guān)系，以及影響用戶喜好的因素。一共有 2 個(gè)步驟：

步驟 1. 分析不同用戶跟軟件之間的接觸點(diǎn)，從未來趨勢和用戶當(dāng)前認(rèn)知角度收集用戶資料

在這一步驟中，我們加入了 2 個(gè)概念，接觸點(diǎn)和未來趨勢。

什么是接觸點(diǎn)？

接觸點(diǎn)指的是用戶與產(chǎn)品發(fā)生交互的關(guān)鍵點(diǎn)，用來捋清楚我們剛剛提到 「用戶跟軟件之間的交互關(guān)系」。以少兒詞典為例，家長和軟件之間的接觸點(diǎn)，可以羅列為：家長聽說少兒詞典 – 到應(yīng)用中心下載軟件 – 打開軟件 – 使用軟件……可見要想打造一款用戶好評度高的好產(chǎn)品，僅僅優(yōu)化軟件的體驗(yàn)是不夠的。

為什么要從未來趨勢和用戶當(dāng)前認(rèn)知角度去收集用戶資料？

剛剛有提到新軟件的周期是較長的，前期定好的風(fēng)格、關(guān)鍵詞等，到了開發(fā)上線后卻不適用了，既浪費(fèi)人力，也浪費(fèi)資源，因此要考慮未來趨勢對用戶的影響。同時(shí)，用戶在選擇軟件的時(shí)候，已有的喜好/預(yù)期/經(jīng)驗(yàn)等用戶認(rèn)知會影響用戶對軟件的判斷。就像大家想到夏天的冷飲時(shí)，腦海中會浮現(xiàn)冰塊、西瓜等元素，因此雪碧、西瓜等符合用戶對夏天認(rèn)知的食品在天氣炎熱時(shí)會熱銷，但是受到大部分買家越來越注重卡路里這一未來趨勢的影響，低卡的西瓜冷飲也可能在未來一段時(shí)間大賣。

接觸點(diǎn)和未來趨勢、用戶認(rèn)知之間有什么關(guān)系？

了解用戶接觸點(diǎn)之后，我們就可以猜測用戶在這一接觸點(diǎn)的需求和心理，加入未來趨勢和用戶認(rèn)知，能讓我們做出來的東西更符合用戶預(yù)期。

尋找接觸點(diǎn)。我們了解到，少兒詞典的目標(biāo)用戶群體是 1～6 年級的學(xué)生和他們的家長，即 6～12 歲孩子，和 30～44 歲家長。然后，我們粗略地將用戶的接觸點(diǎn)劃分為，篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件，孩子、家長跟接觸點(diǎn)之間的關(guān)系就可以展示為：

孩子是軟件查詢、練習(xí)、核心功能體驗(yàn)者，家長是內(nèi)容審核者、軟件篩選者、伴學(xué)時(shí)軟件使用者。

找到接觸點(diǎn)之后，我們還需要把影響用戶認(rèn)知的內(nèi)容具象化。

例如，我們想了解夏天做什么口味的飲品更好，我們可以從夏日飲品口味銷量排行榜，夏日新品類型，夏日廣告等角度來獲得更清晰的用戶認(rèn)知。應(yīng)用到少兒詞典中就是，家長在篩選軟件時(shí)，老師的要求，未來孩子考試的內(nèi)容、日常輔導(dǎo)內(nèi)容、大 V 推薦的內(nèi)容等會影響家長對下載軟件的判斷。每個(gè)接觸點(diǎn)都可以使用這樣的方式，來聯(lián)想更多影響用戶認(rèn)知的內(nèi)容。然后我們將得到類似下面的表格：

根據(jù)表格，我收集了 近 10 頁的用戶信息

步驟 2. 提取收集到的信息，并放入四象限中，總結(jié)出2～4個(gè)視覺關(guān)鍵詞、體驗(yàn)關(guān)鍵詞

雜亂無序的信息只有經(jīng)過歸納之后才能被大家使用。

怎么歸納總結(jié)雜亂的信息呢？

UI 設(shè)計(jì)師都清楚，在進(jìn)行界面設(shè)計(jì)時(shí)，大標(biāo)題、縮進(jìn)、分層等排版方式能讓我們的頁面看起來更清晰易讀。處理雜亂的信息也同理，要做的是找到信息的重點(diǎn)，然后把信息歸類，最后再用一句對內(nèi)容進(jìn)行總結(jié)，方便大家理解。應(yīng)用到我們提取關(guān)鍵詞的環(huán)節(jié)中就是，挑選重要信息、放入四象限中、總結(jié)出能歸納這些信息的關(guān)鍵詞。

挑選重要信息。以家長篩選軟件為例，當(dāng)我們將熱門大 V 推薦的教學(xué)方法、內(nèi)容，進(jìn)行整理的時(shí)候，會發(fā)現(xiàn)美學(xué)、樂感、編程、外文圖書、兒童心理教育、英文教學(xué)方法（自然拼讀）等內(nèi)容出現(xiàn)的頻率很高，在一堆內(nèi)容中挑選跟少兒詞典相關(guān)的內(nèi)容，如美學(xué)、外文圖書、兒童心理教育等。

放入四象限中。在這一方法中，我們將四象限劃分為設(shè)計(jì)和用戶認(rèn)知 2 個(gè)方向，其中設(shè)計(jì)劃分為視覺風(fēng)格和體驗(yàn)風(fēng)格，用戶認(rèn)知劃分為當(dāng)前認(rèn)知和未來趨勢 。以剛剛挑選的兒童美學(xué)教育為例，這是一個(gè)屬于未來家長會越來越關(guān)注的少兒視覺發(fā)展方向，所以我們放在視覺風(fēng)格、未來趨勢這一象限中。其他內(nèi)容也類似，不斷地提取出現(xiàn)頻率高、用戶熱點(diǎn)高的內(nèi)容，并根據(jù)內(nèi)容類型放入四象限中

總結(jié)出能歸納這些信息的關(guān)鍵詞。以視覺和未來趨勢象限為例，我們收集到大 V 的美學(xué)教育，未來的課本發(fā)展趨勢，小學(xué)建筑風(fēng)格發(fā)展趨勢，他們都有一個(gè)特點(diǎn)，顏色柔和無攻擊，色彩豐富，因此，我們總結(jié)出一個(gè)視覺關(guān)鍵詞是柔和多彩。

其他內(nèi)容也采用相同的方法進(jìn)行總結(jié)，少兒詞典的視覺關(guān)鍵詞是柔和多彩，輕質(zhì)感，親和陪伴，體驗(yàn)關(guān)鍵詞是，探索多變，感官刺激和重復(fù)熟悉。

為什么做出來的設(shè)計(jì)稿不是太概念就是沒風(fēng)格？

視覺關(guān)鍵詞出來了，產(chǎn)品的業(yè)務(wù)目標(biāo)也出來了，從關(guān)鍵詞到頁面樣式的邏輯也很嚴(yán)謹(jǐn)，但出來的風(fēng)格卻會覺得跟關(guān)鍵詞不太搭，或是跟競品差異不大，在多款 App 實(shí)踐后，我們發(fā)現(xiàn)可能是這樣的原因：

沒有把關(guān)鍵詞的作用發(fā)揮出來

引用一句說爛了的名言 「一千個(gè)人眼中就有一千個(gè)哈姆雷特」。大家在對關(guān)鍵詞的理解是有差異的，以「年輕」為例子，一款針對活力的年輕人的衣服和一款針對潮流的年輕人的衣服，設(shè)計(jì)風(fēng)格上可能是隔好幾條街的。因此，僅僅得到幾個(gè)視覺關(guān)鍵詞和體驗(yàn)關(guān)鍵詞還不足以讓我們找準(zhǔn)方向，我們還需要將關(guān)鍵詞組合和具體化。一共有 2 個(gè)步驟：

步驟 1. 分別組合產(chǎn)品關(guān)鍵詞和視覺關(guān)鍵詞，產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，找到同時(shí)滿足 2 組關(guān)鍵詞的規(guī)則

為什么將關(guān)鍵詞結(jié)合能讓關(guān)鍵詞的作用發(fā)揮出來呢？

我們的目的是要做一款滿足產(chǎn)品需求，符合用戶認(rèn)知的軟件。

從問題 1 和問題 2 中，我們得到了符合產(chǎn)品需求的產(chǎn)品關(guān)鍵詞，和符合用戶認(rèn)知的視覺關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，想要同時(shí)滿足產(chǎn)品需求和用戶認(rèn)知，我們需要找到他們的重合點(diǎn)。如下圖所示，將產(chǎn)品關(guān)鍵詞和視覺關(guān)鍵詞、體驗(yàn)關(guān)鍵詞分別結(jié)合，這樣的出來的規(guī)則就能最大限度地符合我們的要求，既滿足產(chǎn)品需求，又符合用戶認(rèn)知。

具體怎么做呢？下面將分別從視覺和體驗(yàn)角度舉例子。

視覺角度，以權(quán)威內(nèi)容和柔和多彩結(jié)合為例：

「權(quán)威內(nèi)容」 要求我們輸出的內(nèi)容是符合教材，符合老師標(biāo)準(zhǔn)的，內(nèi)容是準(zhǔn)確無誤的、來源是可靠的；「柔和多彩」 要求我們在進(jìn)行頁面設(shè)計(jì)的時(shí)候減少大面積顏色的使用，色彩柔和，且顏色多樣。

將兩者結(jié)合，我們得到的規(guī)則是：

• 市面上的語文和英語教材以橙色封面為主，因此軟件把橙色作為主色，僅在重點(diǎn)區(qū)域使用橙色；
• 展示內(nèi)容要準(zhǔn)確，在牛津內(nèi)容布局上參考《牛津小學(xué)生》字典，中文字體采用跟教材相似的文鼎新中楷，英文字體采用跟衡水體相似的 Averta Std；
• 參考大 V 推薦的繪本、動畫片常用的顏色，將顏色定為橙色、黃色、藍(lán)色和綠色，降低顏色飽和度；
• 參考繪本的圖案，選擇圓形作為主要的形狀，加入柔和色彩，使用深色和淺色疊加的圓形；
• ……

根據(jù)這些內(nèi)容，我們將得到下面的 4 個(gè)顏色和圓形疊加的形式。（ps：通過這樣的形式確定的是規(guī)則，如：以橙色為主結(jié)合另外 3 個(gè)顏色，圓形，使用深淺色搭配。具體顏色和疊加形式需要在具體頁面中進(jìn)行調(diào)整）

體驗(yàn)角度，以權(quán)威內(nèi)容和探索多變?yōu)槔?

體驗(yàn)上，「權(quán)威內(nèi)容」要求我們的操作形式是跟老師的教學(xué)相似，學(xué)習(xí)方法需要參考成熟且有效的方法；「探索多變」要求我們在交互形式上可以采用多種形式，給孩子探索未知的機(jī)會，交互形式要符合兒童操作習(xí)慣，如涂抹、翻轉(zhuǎn)、拖拉等

將兩者結(jié)合，我們得到的規(guī)則是：

• 中文字體跟寫，手寫涂抹交互形式，添加錯(cuò)誤抖動反饋；
• 單詞記憶，參考如師通學(xué)習(xí)方法，采用卡片翻轉(zhuǎn)形式，將單詞和圖片內(nèi)容分離；
• 英文跟讀，采用表情代替評分機(jī)制；
• ……

其他幾個(gè)關(guān)鍵詞的結(jié)合也是使用這樣的形式，這里就不一一展開。下圖是少兒詞典的視覺關(guān)鍵詞和產(chǎn)品關(guān)鍵詞結(jié)合后的樣式。

步驟 2. 選擇復(fù)雜的核心頁面，把具象化的體驗(yàn)規(guī)則、視覺規(guī)則融進(jìn)頁面中，確定設(shè)計(jì)風(fēng)格

規(guī)則梳理出來后，我們就要挑選一些重要頁面進(jìn)行風(fēng)格嘗試，以結(jié)構(gòu)復(fù)雜的中文查詞單字結(jié)果頁為例：

分析小學(xué)一年級到六年級的考試內(nèi)容，我們了解到部首、筆順筆畫、跟寫、發(fā)音等漢字的基礎(chǔ)信息是低年級用戶（小學(xué)三年級及以下）會使用到，他們要求信息完整且準(zhǔn)確；像詞組、造句這些信息則是針對高年級學(xué)生，要求快速準(zhǔn)確定位到具體的內(nèi)容板塊。

分析完內(nèi)容結(jié)構(gòu)后，我們就需要根據(jù)內(nèi)容布局，加入表格中總結(jié)的體驗(yàn)規(guī)則：

• 重復(fù)熟悉，針對低年級用戶的使用習(xí)慣，我們將頂部信息劃分為展示區(qū)域和操作區(qū)域，方便用戶操作，降低用戶學(xué)習(xí)成本；
• 重復(fù)熟悉，中文查詞結(jié)果頁中，使用田字格上下布局的形式，使用課本同款楷體字，滿足學(xué)生的識別文字書寫規(guī)范的需求，也符合用戶認(rèn)知；
• 探索多變，在 tab 切換的時(shí)候，我們將 tab 選中的顏色變成軟件的 4 個(gè)主色循環(huán)切換，激發(fā)孩子對軟件的探索欲望；
• 探索多變，按鈕形式上采用出血的圖案形式，打破常規(guī)；
• ……

最后，梳理好頁面的體驗(yàn)形式之后，我們開始給頁面添加視覺規(guī)則：

• 在推導(dǎo)中，我們選擇多彩的顏色模式，常見的小學(xué)課本是以橙色為主，因此，軟件也選擇橙色作為主色，并加入黃色、綠色和藍(lán)色作為輔助顏色；
• 圖標(biāo)采用的是孩子熟悉的元素+輕質(zhì)感這樣的組合；
• 結(jié)合繪本和孩子常見元素，使用兩個(gè)圓形疊加的形式，作為軟件的主要元素；
• 為了讓內(nèi)容更符合孩子閱讀和使用習(xí)慣，使用大字號和大間距的形式，常用字號是 32px，最小字號是 28px；
• ……

對比產(chǎn)品原型和市面上的一些競品，我們可以發(fā)現(xiàn)，查詞軟件在內(nèi)容布局上相差無幾。如果沒有找到符合我們產(chǎn)品業(yè)務(wù)目標(biāo)，同時(shí)符合用戶認(rèn)知的規(guī)則，我們將被淹沒在一群查詞軟件中。

步驟 3. 建立一個(gè)畫板，把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來，并給他們限定使用范圍，方便自己查閱和團(tuán)隊(duì)合作

最后一步，相信很多設(shè)計(jì)師都會在設(shè)計(jì)過程中建立一套方便好用的設(shè)計(jì)規(guī)范庫，這里就不展開來說了。

總結(jié)

最后，再對上文的所有內(nèi)容進(jìn)行概括。從 0 到 1 進(jìn)行軟件設(shè)計(jì)我們需要用到下面這 7 步:

1. 多使用「為什么+動詞」的問法，向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶目標(biāo)。
2. 從業(yè)務(wù)目標(biāo)開始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞。
3. 分析不同用戶跟軟件之間的接觸點(diǎn)，從未來趨勢和用戶當(dāng)前認(rèn)知角度收集用戶資料。
4. 提取收集到的信息，并放入四象限中，總結(jié)出2～4個(gè)視覺關(guān)鍵詞、體驗(yàn)關(guān)鍵詞。
5. 分別組合產(chǎn)品關(guān)鍵詞和視覺關(guān)鍵詞，產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，找到同時(shí)滿足 2 組關(guān)鍵詞的規(guī)則。
6. 選擇復(fù)雜的核心頁面，把具體化的體驗(yàn)規(guī)則、視覺規(guī)則融進(jìn)頁面中，確定設(shè)計(jì)風(fēng)格。
7. 建立一個(gè)畫板，把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來，并給他們限定使用范圍，方便自己查閱和團(tuán)隊(duì)合作。

完成這 7 步，將可以讓你從 0 ～ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過，設(shè)計(jì)風(fēng)格明確，用戶粘性高的軟件。

文章來源：優(yōu)設(shè)    作者：ukeyliang