盒子模型與背景屬性

一.盒子模型

1.介紹

2. 元素的總寬度和總高度
   
   二.自定義邊框——border
   
   1.基本設置
   
   2.邊框寬度——Border Width
   
   3.邊框顏色——Border Color
   
   4.邊框樣式——Border style
   
   5.CSS的邊寬和高度——width height
   
   三.背景——background
   
   1.背景顏色——background color
   
   2.背景圖像—— background image
   
   3.背景重復—— background repeat
   
   4.背景的附件（固定與滾動）——background attachment
   
   一.盒子模型
   
   1.介紹
   
   所有HTML元素都可以視為方框。
   
   CSS邊框模型代表網(wǎng)站的設計和布局。
   
   它由邊緣（margins），邊框（ borders），內邊距（paddings），和內容（content）組成的。
   
   這些屬性以什么的順序工作：top->right->bottom->left。
   
   
   
   
   
   小知識：
   
   
   
   網(wǎng)頁的每個元素都是一個盒子（box）。 CSS使用盒子模型來確定盒子有多大以及如何放置它們。
   
   框模型還用于計算HTML元素的實際寬度和高度。
   
3. 元素的總寬度和總高度
   
   （1）總寬度等于左右邊緣，邊框，邊距相加：
   
   
   
   
   
   
   
   （2）總高度：上下相加
   
   
   
   
   
   二.自定義邊框——border
   
   1.基本設置
   
   border屬性允許您自定義HTML元素的邊框。
   
   為了向元素添加邊框，您需要指定邊框的大小，樣式，顏色。
   
   p {
   
      padding: 10px;    
   
      border: 5px solid green;
   
   }
   
   
   
   2.邊框寬度——Border Width
   
   使用border-width屬性可以 單獨設置邊框寬度
   
   
   
   p{
   
      padding: 10px;    
   
      border-style: solid;
   
      border-width: 2px;
   
   }
   
   
   
   3.邊框顏色——Border Color
   
   可以使用顏色名稱，RGB或十六進制值定義元素的邊框顏色。
   
   
   
   p.first {
   
      padding: 10px;
   
      border-style: solid;
   
      border-width: 2px;
   
      border-color: blue;
   
   }
   
   
   
   小知識：除非設置border-style屬性，否則所有border屬性都不會起作用。
   
   
   
   4.邊框樣式——Border style
   
   默認值為none
   
   多種樣式：dotted（點）, 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
   
   要設置<div>元素的總寬度和高度為100px：
   
   div {
   
      border: 5px solid green;    
   
      width: 90px;
   
      height: 90px;
   
   }
   
   
   
   框的總寬度和高度將為90px + 5px（邊框）+ 5px（邊框）= 100px；
   
   
   
   可以使用百分比 進行分配。
   
   div {
   
      border: 5px solid green;    
   
      width: 100%;
   
      height: 90px;
   
   }
   
   
   
   3.要設置元素的最小和最大高度與寬度，可以使用以下屬性：
   
   
   
   min-width-元素的最小寬度
   
   min-height-元素的最小高度
   
   max-width-元素的最大寬度
   
   max-height-元素的最大高度
   
   p{
   
      border: 5px solid green;    
   
      min-height: 100px;       
   
   }
   
   
   
   三.背景——background
   
   1.背景顏色——background color
   
   background-color屬性用來指定一個元素的背景色。
   
   
   
   列：
   
   
   
   body {
   
      background-color: #C0C0C0;
   
   }
   
   h1 {
   
      background-color: rgb(135,206,235);
   
   }
   
   p {
   
      background-color: LightGreen;
   
   }
   
   
   
   2.背景圖像—— background image
   
   background-image屬性中的元素可以設置一個或幾個背景圖像。
   
   URL指定路徑的圖像文件。相對路徑和絕對路徑均受支持。
   
   默認情況下，背景圖像放置在元素的左上角，并在垂直和水平方向重復以覆蓋整個元素。
   
   列;為<p>元素設置背景圖片。
   
   
   
   p {
   
      padding: 30px;
   
      background-image: url("1.jpg");
   
      color: white;   
   
   }
   
   
   
   小知識
   
   
   
   要指定多個圖像，只需用逗號分隔URL。
   
   
   
   3.背景重復—— background repeat
   
   repeat-x：圖片延x軸復制
   
   repeat-y：圖片延y軸復制
   
   Inherited：繼承父級屬性相同的指定值
   
   no-repeat:不重復，只有單個圖片
   
   列：
   
   
   
   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字上下，反復校對6遍以上，初步閱讀完大概需要25分鐘，若是深入理解并完全吸收則建議“先收藏再反復的品，細細的品”。希望對各位朋友有所幫助，不足之處望校正，祝閱讀愉快。

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

iOS設計規(guī)范

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

以下為蘋果手機歷代產(chǎn)品明細（話說你擁有過那幾代產(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設計規(guī)范，這里我總結了一個方法“iOS五點兩圖記憶法”，也就是五個點+兩張圖。

1、設計尺寸：375x667pt @1x（750x1334px @2x）為基準設計。

2、設計工具：Sketch、Adobe XD、Photoshop

3、預覽效果：Sketch Mirror、Adobe XD或Ps Play

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

5、標注工具：藍湖，摹客

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

考考你：

1、iPhone8尺寸的設計稿如何快速變成iPhoneX的設計稿？

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

3、為什么要用375x667pt @1倍圖進行設計？（后文也有詳細答案哦）

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

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

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

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

由此可見，像素這個單位是一個相對單位，不能用厘米、毫米等這些絕對度量單位來衡量他的長度或者寬度，因為1像素只代表一個單位的“點”。

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

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

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

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

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

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

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

一、引導頁

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

二、圖標

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

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

其他設備圖標尺寸

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

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

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

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

導航欄中的元素必須遵守如下幾個對齊原則:

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

2、當前界面的標題必須在導航欄正中。（可無）

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

四、標簽欄（具體尺寸見五點二圖）

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

五、iTunes 上傳頁面

在程序上傳App Store時我們需要提供多張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上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以，只要符合產(chǎn)品氣質并且在色彩心理學理論范圍內。官方建議的系統(tǒng)色彩如下：

iPhone的系統(tǒng)色

八、控件

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

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

默認控件

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

之前我們介紹過，人手指點擊區(qū)域為7mm - 9mm，在@2x中就是44pt（88px）。蘋果的導航條、列表、工具欄都充滿了44pt（88px）這個神秘數(shù)字。我們在設計時一定也要考慮到手指的點擊區(qū)域。

 無處不見的44pt（88px）

九、界面設計原則

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

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

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

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

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

（2）卡片間距

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

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

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

（3）內容間距

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

格式塔鄰近性原則：

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

在UI設計中內容布局時，一定要重視鄰近性原則的運用 

2.內容布局

在APP的設計中內容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

（1）列表式布局

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

（2）卡片式布局

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

3.界面圖片設計比例

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

4.APP版式設計規(guī)范

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

（1）對齊

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

（2）對稱

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

（3）分組

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

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

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

切圖命名對照表

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

navi_icon_search_default@2x.png

(導航_圖標_搜索_正常@2x.png)

Android設計規(guī)范

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

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

DP：安卓專用長度單位。

以160 DPI屏幕為標注，則1DP=1PX

計算公式：dp x dpi/160=px

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

SP：安卓專用字體單位。

以160 DPI屏幕為標注，則1SP=1PX

計算公式：sp x dpi/160=px

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

二、安卓設計尺寸：以1080x1920px作為設計稿標準尺寸

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

2.大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。

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

三、安卓圖標尺寸

四、安卓字體

中文：思源黑體 / 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的設計稿適配安卓

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

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設計尺寸進行設計是可以適配Android的。（前提是必須和安卓工程師溝通清楚）

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

iOS開發(fā)語言

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

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

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

轉自：站酷-蝸牛和筆

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· 使用具有透明度的圖標和文字，在亮色模式轉黑暗模式的時候會更加輕松

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

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

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

轉自：站酷-靜design

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

Swift閉包

閉包的形式

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

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

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

從閉包中返回值

閉包作為參數(shù)

尾隨閉包語法

值捕獲

逃逸閉包

閉包的形式

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

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

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

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



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



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



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



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



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

let bibao = {

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

}



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



bibao()



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

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



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



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



let bibao= { (bao1: String) in

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

}



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



bibao("閉包")



從閉包中返回值

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



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



let bibao= { (bao1: String) in

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

}



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



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

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

}



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



let message = drivingWithReturn("閉包")

print(message)



閉包作為參數(shù)

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



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



let driving = {

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

}



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



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



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

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

  action()

  print("我建好了")

}



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



travel(action: driving)

1

尾隨閉包語法

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



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



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

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

  action()

  print("我建好了")

}



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



travel() {

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

}



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



travel {

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

}



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



值捕獲

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

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

官方文檔例子：



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

     var runningTotal = 0

     func incrementer() -> Int {

         runningTotal += amount

        return runningTotal

     }

     return incrementer

 }

 //運行結果：

 let one = makeIncrementer(forIncrement: 10)

print(one())  //10

print(one())  //20



let two = makeIncrementer(forIncrement: 10)

print(two())  //10

print(two())  //20



逃逸閉包

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

官方文檔例子：



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

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

    completionHandlers.append(completionHandler)

}



如上面例子，加入標注@escaping即可表明這個閉包是允許逃逸的



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

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

在我們寫頁面時，

瀏覽器緩存問題

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

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

細節(jié)問題

寫錯屬性名致使無法與html匹配，或屬性值不符合規(guī)范；



html標簽沒寫完整，漏了“<”或者”>”等；



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



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



css樣式中間沒有加分號；

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

對同一個屬性進行設置時是用空格隔開，比如border:1px solid red; 對不同的屬性進行設置時是用分號隔開，比如width:300px;height:300px;

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

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

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

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

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

選擇器問題

后代子代選擇等，涉及多個標簽，類名、id等，子選擇器的順序、名字等寫錯了，均可能導致出錯；

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

后代選擇器忘了寫空格；

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

編碼格式問題

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

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

樣式層疊問題

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

比如現(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的所有屬性變化，并不是我們想要的效果，所以做點修改：



watch: {

   'obj.a': {

      handler (newName, oldName) {

        console.log('obj.a changed')

      }

   }

  }



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



computed: {

    a1 () {

      return this.obj.a

    }

}



利用計算屬性的特性來實現(xiàn)，當依賴改變時，便會重新計算一個新值。

HTML基礎知識

1. HTML的歷史：HTML，XHTML
2. HTML的全局屬性：全局標準屬性，全局事件屬性

3. HTML的元素：

4. 

5. 

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

8. 標簽的分類：雙標簽，單標簽。

HTML的全局標準屬性
在HTML中，規(guī)定了8個全局標準屬性。

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

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

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

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

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

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

head中包含的元素

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

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

cache-control，用于告訴瀏覽器如何緩存某個響應及緩存多長時間。

參數(shù)：



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



no-store，允許緩存，每次都要去服務器上下載完整的響應



public，緩存所有響應



private，只為單個用戶緩存



max-age，表示當前請求開始，相應響應在多久內能被緩存和重用，不去服務器重新請求，max-age=60表示響應可以再緩存和重用60秒



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

1

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

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

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

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



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



查看div+css樣式HTML:點擊下方鏈接跳轉，可查看源碼：



div-css.html



格式化元素

普通文本

<b>，定義粗體文本

<big>，定義大號字

<em>，定義著重文字

<i>，定義斜體字

<small>，定義小號字

<strong>，定義加重語氣

<sub>，定義下標字

<sup>，定義上標字

<ins>，定義插入字

<del>，定義刪除字

計算機輸出

<code>，定義計算機代碼

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

<samp>，定義計算機代碼樣本

<tt>，定義打字機輸入樣式

<pre>，定義預格式文本

術語

<abbr>，定義縮寫

<acronym>，定義首字母縮寫

<address>，定義地址

<bdo>，定義文字方向

<blockquote>定義長的引用

<q>，定義短的引用語

<cite>，定義引用，引證

<dfn>，定義一個概念，項目





圖像熱區(qū)鏈接

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



這個時候不是<a>標簽元素了，而是<area>元素。



<area>元素的屬性有兩個shape，cords屬性。

<area>的坐標系，原點為圖片的左上角,x軸正方向向右，y軸正方向向下

我畫個圖哈，反映<area>的坐標系：

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

要為<map>標簽賦予name屬性。

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

為了證明我學會了，我寫一個html頁面。

map -> name="image_link"

img -> usemap="#image_link"
1
點擊跳轉：imgmap.html

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

點擊下方鏈接即可看到效果：

聯(lián)系我們

代碼：

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



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

無序列表，<ul>定義無序列表，<li>定義列表項。
<ul>的type屬性值：disc點，square方塊，circle圓，none無.

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

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

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

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

7. <td>的兩個屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列
8. <tbody>,<thead>,<tfoot>標簽通常用于對表格內容進行分組。
9. 表單由<form>標簽定義，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>標簽具有name,cols,rows3個屬性。

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

效果：

自我評價：

代碼：

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

frameset

1. <frameset>定義一個框架集，用于組織多個窗口，每個框架存有獨立的html文檔
2. <frameset>不能與<body>共同使用，除非有<noframe>元素
3. <frame>用于定義<frameset>中一個特定的窗口?？赵?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

顯示結果 描述 實體名稱 實體編號
空格 &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;
© 版權（copyright） &copy; &#169;
® 注冊商標 &reg; &#174;
? 商標 &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;
————————————————
版權聲明：本文為CSDN博主「達達前端」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_36232611/article/details/105109467

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

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

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

在解決這些困惑之后，我總結了一套自用的，適合從 0 ～ 1 進行軟件設計或項目改版的方法 ，并在其他項目上進行了二次驗證。

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

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

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

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

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

原因 1：目標不明確

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

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

為什么要了解目標？

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

什么是業(yè)務需求、業(yè)務目標和用戶目標？

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

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

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

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

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

在少兒詞典項目中

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

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

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

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

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

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

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

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

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

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

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

設計關鍵詞為什么總是找不對

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

原因：對用戶不夠了解

為什么不了解用戶會導致關鍵詞找不對？

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

而了解目標用戶是又一件復雜的事情。

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

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

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

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

步驟 1. 分析不同用戶跟軟件之間的接觸點，從未來趨勢和用戶當前認知角度收集用戶資料

在這一步驟中，我們加入了 2 個概念，接觸點和未來趨勢。

什么是接觸點？

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

為什么要從未來趨勢和用戶當前認知角度去收集用戶資料？

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

接觸點和未來趨勢、用戶認知之間有什么關系？

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

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

孩子是軟件查詢、練習、核心功能體驗者，家長是內容審核者、軟件篩選者、伴學時軟件使用者。

找到接觸點之后，我們還需要把影響用戶認知的內容具象化。

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

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

步驟 2. 提取收集到的信息，并放入四象限中，總結出2～4個視覺關鍵詞、體驗關鍵詞

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

怎么歸納總結雜亂的信息呢？

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

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

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

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

其他內容也采用相同的方法進行總結，少兒詞典的視覺關鍵詞是柔和多彩，輕質感，親和陪伴，體驗關鍵詞是，探索多變，感官刺激和重復熟悉。

為什么做出來的設計稿不是太概念就是沒風格？

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

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

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

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

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

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

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

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

視覺角度，以權威內容和柔和多彩結合為例：

「權威內容」 要求我們輸出的內容是符合教材，符合老師標準的，內容是準確無誤的、來源是可靠的；「柔和多彩」 要求我們在進行頁面設計的時候減少大面積顏色的使用，色彩柔和，且顏色多樣。

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

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

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

體驗角度，以權威內容和探索多變?yōu)槔?

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

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

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

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

步驟 2. 選擇復雜的核心頁面，把具象化的體驗規(guī)則、視覺規(guī)則融進頁面中，確定設計風格

規(guī)則梳理出來后，我們就要挑選一些重要頁面進行風格嘗試，以結構復雜的中文查詞單字結果頁為例：

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

分析完內容結構后，我們就需要根據(jù)內容布局，加入表格中總結的體驗規(guī)則：

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

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

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

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

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

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

總結

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

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

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

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