Ⅰ 移動APP的常見的幾種導航形式
當確定了APP的設計需求和產品的整體結構之後，要著手開始規劃和製作APP的原型及UI界面。一款APP的好與不好，很大部分取決於APP界面布局的合理性。這個時候就要想以最優的設計結構將APP的內容展現給用戶，那麼，如何將信息以最優的形式展現出來呢？這就涉及到了APP的導航應用方式，可以說一個優秀的導航設計對一款App的核心體驗起到了決定性的作用！
知道了導航的重要性，在考慮導航設計時，需要注意以下事項：
1.可達性：
移動應用的導航功能可以說是所有界面最重要的組成部分，因此一定要保證其可達性，並把最關鍵的要素盡量突出，同時不要影響到內容本身。
2.目的性：
確保導航中的每個按鈕要素簡單明了，有明確的引導用戶點擊的目的性。讓用戶一看就知道是什麼意思以及操作結果是什。不要弄的太過花哨，這樣反而會讓迷惑用戶，起到反作用。
3.易於理解：
如果想設計比較高級的導航功能（例如鏈接圖片、允許滑動或其他手勢導航，或者訪問隱藏菜單），請務必在設計過程中保證前後一致，以便用戶熟悉你所使用的模式，同時還應加入一些額外的信息（例如小箭頭、文字或改變顏色或高亮等）來吸引用戶注意力，並以微妙的方式對用戶進行引導。不要給用戶呈上「看得見摸不著的導航功能」。
4.通用性
導航功能應當以一定的形式顯示於移動應用的各個界面。各個導航模式不一定要完全相同，但其基本結構應當在應用內保持一致，可以根據背景進行小幅度的調整。
明確上述幾點注意事項後，將APP的信息結構分層，把主要、最核心、最根本的功能放在第一層級，次要內容放在第二層級甚至更深。然後根據層級關系、結構關系確定導航的形式。
結合產品的深度和廣度來共同探討一下目前APP界面常見的幾種導航形式，並分析其優缺點，從而進一步判斷每一種導航形式更適合應用於哪種類型的APP！
標簽式導航，也就是常說的Tab式導航。是目前應用最廣泛、最常見的導航形式。
標簽式導航可分為 頂部標簽式導航、底部標簽式、舵式導航（底部擴展式導航）。
頂部標簽式導航
頂部標簽式導航顧名思義，存在於頁面的頂部。頂部標簽導航多應用於Android平台，因其平台特性，底部含有虛擬的物理按鍵，如華為手機存在手機屏幕內的物理按鍵。
很多App為了適配安卓平台，採用了頂部標簽式導航，目的是為了不與底部虛擬按鈕組合在一起產生的信息堆疊和誤操作，這也是一種妥協行為。但不斷升級的Android平台app現如今也和ios盡量保持一致。
不過也有很多ios平台根據產品結構應用此類型的導航。
上圖是蝦米音樂app首頁導航模式，採用了頂部標簽式導航。這樣設計是為了 更多展示標簽下的內容，還有一點是支持快捷操作 。方便展示/點擊下方快捷區域的內容和按鈕（當前曲目、歌手、播放/暫停和下一曲）。
底部標簽式導航
底部標簽式導航是最常用的導航形式，一般存在於頁面底端，不超過5個模塊。
如果應用需要用戶 頻繁的在不同分頁切換 ，可以採用這種導航，如上圖微信最新版的APP界面設計圖。這種導航欄符合拇指操作熱區。
舵式導航（底部擴展式導航）
舵式導航是底部導航的一種擴展形式，是一種變體。因為它的樣式很像輪船上用來指揮的船舵，兩側是其他操作按鈕。
當頁面有處於同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口 ，就可以採用這種APP導航模式。 中間項標簽不緊操作最頻繁，最重要，且需要引人注意，方便尋找 。
左圖為懶人聽書App，右圖為新浪微博手機客戶端。兩款App的主要功能都採用了舵式導航的布局方式，將操作最頻繁的按鈕進行特殊處理，在視覺設計上突出，與導航上的其他按鈕進行區分，引導用戶操作。
頂部導航+底部導航（雙導航模式）
今日頭條和網易新聞這種新聞類APP，由於內容、分類較多，運用頂部和底部雙tab導航，而切換頻率最高的tab放在頂部，這是為什麼呢？因為新聞在每個tab都是沉浸式閱讀，最常用的操作是在一個tab中不斷地下滑閱讀內容，將常用的tab放在頂部，向左或向右滑動切換tab的手勢操作，能帶來更好地閱讀體驗。
在兩種情況下可以選擇頂部tab式導航：某項功能必須固定在底部，那麼其他tab只能固定在頂部，但為了方便操作，頂部tab導航最好支持手勢操作，即滑動即可切換;該APP是沉浸式體驗，如新聞、小說等，為了帶給用戶更好的閱讀體驗，可以將tab放在頂部。
實際上，底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式，他不怎麼出彩，但是絕對不會犯錯。在大屏幕時代，底部Tab模式的導航更能適應，也更好設計。
適用於：
入口分類數目不多，可以控制在5個以內，且用戶需要在入口間頻繁切換來執行多個任務
注意：
結構太過復雜而且不穩定的應用不適合標簽式導航。
抽屜式導航模式一般採用將導航主體隱藏在app側邊的方式，以一個按鈕來呼出導航，在使用完成之後在使用相同的按鈕隱藏起來。一拉一縮，從形象上與抽屜類似，因此稱之為抽屜式導航。
抽屜式導航的核心思路是「隱藏」。隱藏非核心的操作與功能，讓用戶更專注於核心的功能操作上去。 設想你的產品信息層級有非常多的頁面和內容，難以在一屏內顯示全部內容，那麼你一定首先會想到去設計一個底部或頂部的tab導航，但導航太多無疑顯得臃腫，而且使用戶難以點擊，那麼這個時候，抽屜式導航是個不錯的選擇。
抽屜式導航存在幾個缺陷：
1.左上角的導按鈕存在於單手拇指操作熱區難以到達的位置，導致導航按鈕難以觸達；2.降低了用戶對產品一半的參與度；3.可見性低。
有些人認為「現在的APP的發展不僅僅是從前單一的功能，功能隨產品的發展變得越來愈多，抽屜式導航已經不適應大多數的產品，這種導航終將被遺棄」。但是，導航欄的使用方式並不是單純隨著看產品的功能增加而不被使用，而是隨著整個產品的信息結構和功能形式來設計決定的。拋開產品的功能表現而去講產品設計是不合理的。
何種情況下適合使用抽屜式導航：
1.如果應用主要的功能和內容都在一個頁面裡面。只是一些低頻操作內容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。
2.如果應用有不同的視圖，且他們是平級的，需要用戶同等地對待，抽屜欄將會浪費掉大多數的用戶對於側邊欄中入口的潛在參與度和交互程度。
3.在大屏時代使用抽屜欄，手勢操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個不錯的選擇。
注意：
需要用戶有一定參與的信息層級，最好不好放置在抽屜欄
跳板／快速啟動／宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。
採用這種導航的應用已經越來越少， 往往用在二級頁作為內容列表的一種圖形化形式呈現，或是作為一系列工具入口的聚合。 如下圖新浪微博，點擊導航欄中間的發布按鈕，彈出二級菜單，這個二級頁面就是採用的宮格式導航，作為發布微博的入口。
這種導航模式非常常見，但是卻不常用。
無論你用的是Android還是iOS，每天一打開手機，宮格式導航就會對你說hello了。
每一個APP都是一個宮格，這些宮格聚集在中心頁面，用戶只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用於各平台系統的中心頁面。
宮格式導航的缺陷 ：
信息互斥，無法相互通達，只能給用戶帶來了更多的操作步驟。無法讓用戶在第一時間看到內容，選擇壓力較大。
何種情況下適用於宮格式導航：
適合入口相互獨立互斥，且不需要交叉使用的信息歸類
注意：
一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。
列表式導航結構清晰，易於理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。作為輔助導航來展示二級甚至更深層級的內容
列表式導航分為3類： 標題式列表、內容式列表、嵌入式列表。
標題式列表 :一般只顯示一行文字，有的顯示一行文字加一張圖片等等。
內容式列表： 主要以內容為主，所以在列表中就會體現出部分內容信息，點擊進去就是詳情。
嵌入式列表： 嵌入式其實就是由多個列表層級組合而成的導航。能很好的解決次要功能非常多的問題
所有關於列表導航的例子大部分都是依附於標簽導航之上的。前面我就說過現在以列表形式作為主導航的產品是越來越少，因為確實它不是一個好的主要展示形式。 列表項目可以通過間距、標題等進行分組，形成擴展列表。 列表菜單導航可以將重要的UI部分以列表的形式進行呈現，讓用戶可以滾動查看自己要執行的操作或內容。
而在二次層級上，它們還會 將列表分模塊進行展示 ，如微信中「我的」模塊「新消息通知、隱私、通用」是一組，「幫助與反饋、關於微信」又是一組。雖然你能看到，但是不仔細觀察就不會發現其中的要點。只要善用這個細節，可以更好的加以區分次要功能，並提升用戶體驗度。
懸浮icon導航，是將導航頁面分層，無論你到達APP的哪個頁面，懸浮icon永遠懸浮在上面，你依靠懸浮層隨時可以去想要去的地方。
懸浮式icon會遮擋某些頁面的操作，在設計的時候應該考慮進去，比如無論在那個頁面永遠為懸浮icon留有位置。
標簽式導航： 最常用、最不易出錯，請第一時間考慮它
抽屜式導航： 如果你的信息層級繁多，可以考慮將輔助類內容放在抽屜中
跳板式／宮格式導航： 不建議在APP中作為主導航使用，如果非使用不可，請增加跳轉的關聯性
列表式導航： 作為輔助導航來展示二級甚至更深層級的內容，每個APP必不可少，但請注意數量與分類
懸浮式導航： 更適應大屏的導航模式，不妨試一試，但注意不要讓它遮擋住某些頁面的操作
還是那句話，優秀的app導航設計，能夠合理地完美展示產品的功能，並快速引導用戶使用，增強用戶的識別度。合理的導航設計，會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。
感謝大家的耐心閱讀，還有一路陪伴的行業大牛為我指點迷津！如果內容觀點有不對的地方，歡迎批評指正！
Ⅱ 涓轟粈涔堥夋嫨XXHDPI鍋氳捐″憿錛
鈥榪欐槸瀹夊崜UI鐨勭浜岀瘒鏂囩珷錛岀涓綃囦富瑕佽蹭簡鍜岃捐＄浉鍏崇殑瀹夊崜緋葷粺鍩虹鐭ヨ瘑錛岃繖綃囨枃絝犱富璁茶捐¤繃紼嬬殑閲嶈佹ラわ紝璁捐″伐鍏鋒帹鑽愶紝浠ュ強鏂囨湯璧勬簮涓嬭澆銆鈥
01. 涓ょ偣鍥犵礌紜瀹氳捐＄垮昂瀵1.鏂囨。澶у皬涓婁竴綃囨枃絝犳彁鍒幫紝澶у浘緙╁皬姣斿皬鍥炬斁澶х殑鎹熻楀皬錛岄偅鎴戜滑搴旇ユ牴鎹鏈澶х郴緇熷睆騫曞瘑搴XXXHDPI鍋氳捐＄垮悧錛熺瓟妗堟槸涓嶈岀殑錛屽洜涓鴻捐＄挎枃妗ｅお澶э紝 ps瀹規槗鍗★紝鍒囧浘緇欏紑鍙戜篃浼氬炲ぇ瀹夎呭寘錛屾墍浠ヤ笉鑳介夋渶澶у昂瀵搞
2.甯傚満鍗犳瘮錛涓嬪浘鏄鎴戞牴鎹浠婂勾鏈鐑鎵嬫満鍨嬪彿鏁寸悊鐨勮〃鏍箋
浠庡浘涓鍙浠ョ湅鍑猴紝鏈鐑鏈哄瀷灞忓箷灝哄稿湪5.0浠ヤ笂錛屽睆騫曞瘑搴﹀湪400ppi浠ヤ笂錛屽垎杈ㄧ巼涓昏佹槸1080px*1920px銆
鎴戣繕鎵句簡鍏朵粬鐩稿叧璧勬枡錛岀粨鏋滄樉紺哄垎杈ㄧ巼1080px*1920px鐨勫競鍦哄崰姣旇秺鏉ヨ秺楂樸
鏍規嵁涓婇潰涓ょ偣鐨勫垎鏋愶紝寰楀嚭鐨勭粨璁烘槸錛鎸夌収1080px*1920px灝哄歌捐錛屽畠鏃㈤檺鍒朵簡鏂囦歡澶у皬鍙堣兘婊¤凍澶у氭暟鐢ㄦ埛鐨勬樉紺烘晥鏋溿
02. XXHDPI璁捐＄1080px*1920px鍒氬ソ鏄瀹夊崜緋葷粺灞忓箷瀵嗗害XXHDPI鐨勫垎杈ㄧ巼錛岃繖涓よ呯殑瀵瑰簲鍏崇郴鏄璋鋒瓕瑙勫畾鐨勶紝涓嶅繀娣辯┒錛屾垜浠鍙闇鍦╬s閲屾柊寤虹敾甯1080px*1920px錛屽垎杈ㄧ巼72ppi銆
錛堜箣鍓嶇殑鏂囩珷璇磋繃錛岀敾甯冭劇疆涓哄儚緔狅紝鍒嗚鯨鐜囦笉閲嶈侊紝璁劇疆澶氬皯閮藉彲浠ワ級
XXHDPI瀵瑰簲3X鍥撅紝涔熷氨鏄1dp=3px銆傚湪Material Design璁捐¤勮寖閲岋紝鎶奷p鍜宲x鎹㈢畻錛屽氨鑳藉緱鍒扮浉搴旀帶浠剁殑灝哄稿暒銆
03. 閫傞厤涓婁竴綃囨枃絝犺︾粏璁蹭簡瀹夊崜緋葷粺閫傞厤鍘熺悊錛岀畝鍗曠殑璇村氨鏄錛屾寜鐓х郴緇熷睆騫曞瘑搴﹂傞厤錛屼絾鏄鏈夌郴緇熺緝鏀懼浘鐗囧拰鍒囧嶆暟鍥劇墖涓ょ嶆柟寮忥紝鍏蜂綋鍐呭硅風湅涓婃湡鏂囩珷銆
04. 鏍囨敞鏍囨敞鐨勭簿鍑嗗害鐩存帴鍏充箮鍒拌捐＄跨殑榪樺師搴︼紝閭ｆ庢牱鏍囨敞鎵嶈兘鐪佹椂鍙堢渷鍔涘憿錛
鏍囨敞杞浠舵帹鑽愶細PxCook鍍忕礌澶у帹
浠ュ墠鎴戜篃鐢ㄨ繃鈥鏍囦綘濡廣侀┈鍏嬫浖銆丄ssistor PS鈥濓紝緇煎悎姣旇緝鎺ㄨ崘PxCook錛屽畠鐨勫畨瑁呭寘寰堝皬錛屾敮鎸佸氬鉤鍙幫紝鏍囨敞鍔熻兘闈炲父鏅鴻兘錛岃繕鑳借嚜鍔ㄧ敓鎴愪唬鐮併
PxCook鏈夎捐″拰寮鍙戜袱縐嶆ā寮忥紝璁捐℃ā寮忎富瑕佺敤浜庤捐″笀鏍囨敞鏁板礆紝閫夋嫨瀹夊崜璁捐＄垮崟浣嶅氨鏄痙p鍜宻p銆傚紑鍙戞ā寮忎富瑕佺敤浜庨勮堟爣娉ㄤ俊鎮鍜屼唬鐮侊紝鏈変簡寮鍙戞ā寮忓畬鍏ㄤ笉闇瑕佽捐″笀鏍囨敞濂藉悧錛屽紑鍙戦渶瑕佸摢閲屾寚鍝閲屻
瀹冪殑浼樺娍浣撶幇鍦錛
鑳芥爣娉ㄥ浘褰㈢殑鍦嗚掞紝鎻忚竟錛屾姇褰憋紝閫忔槑搴︼紱鑳芥爣娉ㄦ枃瀛楃殑琛岄珮錛屽瓧闂磋窛錛屽歸綈鏂瑰紡銆傚弽姝ｈ捐℃湁鐨勪俊鎮閮借兘鏍囨敞銆傚拰ps紲炲悓姝ワ紝鍦╬s閲屾洿鏀瑰厓緔狅紝pxcp鏂囦歡浼氳嚜鍔ㄦ洿鏂版敼鏍囨敞淇℃伅錛岀湡鐨勯潪甯歌禐錛侊紒錛侀噸鐐癸紝鍏嶈垂銆灝忔暟闂棰橈細鍍忕礌涓嶈兘涓哄皬鏁幫紝鍚岀炴笚紲炴牱dp涔熷敖閲忎笉瑕佽劇疆鎴愬皬鏁幫紝閬垮厤dp涓哄皬鏁扮殑鏂規硶鏄錛屽亣濡傛垜浠璁捐＄殑鏄3X鍥撅紝閭ｄ箞鐢誨竷閲屾墍鏈夌殑鍏冪礌閮藉繀欏繪槸3鐨勫嶆暟錛屽叾浠栬捐＄跨被浼礆紝鏍囨敞鐨勬暟鍊奸櫎浠3鍒氬ソ鏄鏁存暟錛屼篃灝辨槸dp鐨勫箋
鐑鍖洪棶棰橈細鎵嬫満灞忛兘鏈夋渶灝忚Е鎽歌寖鍥達紝濡傛灉鍥炬爣灝忎簬榪欎釜鍊礆紝鏍囨敞鐨勬椂鍊欒板緱緇欏皬鍥炬爣鍔犵儹鍖恆
05. 鍒囧浘鍒囧浘鍜屾爣娉ㄤ竴鏍鳳紝涔熸槸淇濊瘉璁捐＄胯繕鍘熷害鐨勯噸瑕佺幆鑺傘
鍒囧浘杞浠舵帹鑽愶細Cutterman
Cutterman鏄痯s鐨勬彃浠訛紝杞浠跺寘灝忥紝鎺ㄨ崘瀹夎呭畼鏂瑰畬鏁寸増PS cc 錛岀豢鑹茬増Ps鏃犳硶浣跨敤銆傚畠鑳藉垏iOS錛孉ndroid錛孭C涓変釜騫沖彴鐨勫浘鐗囷紝鍒囧浘鍓嶈板緱璁劇疆褰撳墠鍩哄噯錛屽嵆璁捐＄跨殑灝哄搞
鍜屽叾瀹冨垏鍥捐蔣浠剁浉姣旓紝瀹冪殑鎿嶄綔鏂逛究寰堝氾紝鐣岄潰鍔熻兘綆鍗曚笖瀹規槗鐞嗚В錛屼笉鍍廇ssistor PS錛屾垜鐜板湪榪樻病鏄庣櫧瀹冨垏瀹夊崜鍥劇墖鐨勫師鐞嗭紝鍒囧嚭鏉ョ殑鍥劇墖灝哄鎬篃涓嶅癸紝瀹屽叏涓嶇煡閬撻棶棰樺嚭鍦ㄥ摢閲屻
娉ㄦ剰錛
鍥懼眰涓嶈佹湁鐩稿悓鍚嶇О錛屽洜涓虹浉鍚屽悕縐扮殑鍒囧浘浼氳瑕嗙洊銆備竴鑸瀹夊崜鍒囦笁濂楀浘緇欏紑鍙戱紝鍗硏hdpi錛寈xhdpi錛寈xxhdpi銆鐐9鍥
.9.png鏄疉ndroid寮鍙戜腑浣跨敤鐨勫浘鐗囨牸寮忥紝浣滅敤鏄淇濊瘉鍠婅鍥劇墖鍦ㄦ媺浼稿悗鏄劇ず涓嶅け鐪燂紝涓昏佺敤浜庨伩鍏嶅渾瑙掋佹弿杈廣佽儗鏅綰圭悊絳夋ā緋婂彉褰錛屽悓鏃惰繕鍑忓皬浜嗗浘鐗囪祫婧愩
png鍥劇墖
.9.png鍥劇墖
涓昏佸簲鐢ㄥ満鏅錛瀵硅瘽妗嗭紝鑳屾櫙綰圭悊錛涚幇鍦ㄨ捐￠庢牸澶у氭槸鎵佸鉤椋庢牸錛屾寜閽鍔犳笎鍙樺拰鎶曞獎鐨勭浉瀵瑰皯瑙併
.9鍥劇墖鍘熺悊鏄錛閫氳繃涓婅竟鍜屽乏杈鏉ユ帶鍒舵媺浼稿尯鍩燂紝閫氳繃鍙寵竟鍜屼笅杈鏉ユ帶鍒跺唴瀹圭殑鏄劇ず鍖哄煙銆
.9鍥劇墖鐨勫洓涓灞炴э細
涓婃柟鐨勯粦綰匡紝鎸囩殑鏄姘村鉤鏂瑰悜鐨勬媺浼稿尯鍩熴傛按騫蟲柟鍚戞媺浼稿浘鐗囨椂錛屽彧鏈夐粦綰垮尯鍩熷唴鐨勫浘鍍忎細琚鎷変幾錛岄粦綰誇袱杈圭殑鍥懼儚淇濇寔鍘熺姸錛岃繖淇濊瘉浜嗗乏鍙充袱杈圭殑杈規嗗渾瑙掑拰鎻忚竟涓嶅彉娓鎬簭銆傚乏鏂圭殑榛戠嚎錛屾寚鐨勬槸鍨傜洿鏂瑰悜鐨勬媺浼稿尯鍩熴傚瀭鐩存柟鍚戞媺浼稿浘鐗囨椂錛屽彧鏈夐粦綰垮尯鍩熷唴鐨勫浘鍍忎細琚鎷変幾錛岄粦綰誇袱杈圭殑鍥懼儚淇濇寔鍘熺姸錛岃繖淇濊瘉浜嗕笂涓嬩袱杈圭殑杈規嗗渾瑙掑拰鎻忚竟涓嶅彉銆備笅鏂圭殑榛戠嚎錛屾寚鐨勬槸璇ュ浘鐗囦綔涓烘帶浠惰儗鏅鏃訛紝鎺т歡鍐呴儴鐨勬枃瀛楀乏鍙寵竟鐣屽彧鑳芥斁鍦ㄩ粦綰垮尯鍩熷唴銆傚彸鏂圭殑榛戠嚎錛屾寚鐨勬槸璇ュ浘鐗囦綔涓烘帶浠惰儗鏅鏃訛紝鎺т歡鍐呴儴鐨勬枃瀛椾笂涓嬭竟鐣屽彧鑳芥斁鍦ㄩ粦綰垮尯鍩熷唴銆娉ㄦ剰錛
鐐規垨綰垮繀欏繪槸綰榛戣壊#000000鏂囦歡鐨勫悗緙鍚嶅繀欏繪槸.9.png鐐逛節鍥劇墖鍒朵綔宸ュ叿錛draw9patch
鏃х増鐨凜utterman鑷甯︾偣涔濆垏鍥懼姛鑳斤紝浣嗘槸鏂扮増娌℃湁浜嗭紝鍙鑳芥槸鐐逛節鍥句嬌鐢ㄨ寖鍥村お紿勬垨鑰呭紑鍙戠紪璇戜細鍑洪棶棰樺惂錛屼負浜嗛伩鍏嶅嚭鐜伴棶棰樻帹鑽愬畨鍗撶郴緇熻嚜甯︾殑宸ュ叿draw9patch鍒朵綔鐐逛節鍥
鍩烘湰鎿嶄綔濡備笅錛
鎶婇渶瑕佸埗浣滅偣涔濈殑鍥劇墖淇濆瓨涓烘渶灝忓昂瀵哥殑png錛屼互鍑忓皬鍥劇墖璧勬簮錛岀劧鍚庢嫋鍏draw9patch銆傜偣鍑婚紶鏍囧乏閿鐢婚粦綰匡紝鎸変綇shift鐐瑰嚮榧犳爣宸﹂敭鎿﹂櫎榛戠嚎銆備笂鍜屽乏鏄鎷変幾鍖哄煙錛屽彲浠ュ彧鐢諱竴涓鐐癸紝涓嬪拰鍙蟲槸鏂囧瓧鍖哄煙錛岄粦綰跨殑闀垮害灝辨槸鍐呭硅寖鍥淬傚彸渚х獥鍙ｆ湁瀹炴椂棰勮堬紝鎷栧姩婊戝潡鏌ョ湅鏁堟灉錛岄伩鍏嶅嚭閿欍傚埗浣滃畬鎴愶紝鐐瑰嚮淇濆瓨鍗沖彲銆傝︾粏鏁欑▼璇楓鍥懼垏瀹屼簡錛屾庝箞鍛藉悕鍛錛
06. 鍛藉悕瑙勫垯鍛藉悕鐨勮勮寖涓嶆槸鍥哄畾鐨勶紝鍏抽敭鏄鐪嬪叕鍙稿紑鍙戠殑鍛藉悕涔犳儻錛屽傛灉鏈変互鍓嶇殑璁捐℃枃妗ｅ彲浠ュ弬鐓с
涓鑸瑙勮寖鏄錛鍒嗙被鍚嶇О+鎺т歡鍚嶇О+鍔熻兘+鐘舵.png錛涗笉鑳界敤涓鏂囧懡鍚嶏紝涓嶈佷互鏁板瓧鎴栫﹀彿寮澶達紝鎺ㄨ崘浣跨敤鑻辨枃灝忓啓瀛楁瘝鍛藉悕錛屼嬌鐢ㄤ笅鍒掔嚎榪炴帴銆
涓句釜渚嬪瓙錛
涓涓鍒楄〃涓婄殑鎸夐挳錛岀偣鍑繪煡鐪嬫洿澶氾紝澶勪簬姝ｅ父鐘舵併
List_btn_more_nor.png
鍒囩墖鍒嗙被鏄鍒楄〃list涓婄殑鍏冪礌錛屾帶浠舵槸鎸夐挳btn錛屽姛鑳芥槸鏌ョ湅鏇村歮ore錛岀姸鎬佹槸姝ｅ父nor銆
鏈鍚庯紝浜や粯緇欏紑鍙戠殑鏂囨。鍖呭惈錛
璁捐℃晥鏋滃浘jpg鏍囨敞婧愭枃浠秔xcp鍒囧浘png瀹岋紒
鎬葷粨錛鍒拌繖閲屾枃絝犲氨緇撴潫鍟︼紒鏈鏂囩殑鍐呭歸兘鏄璁捐¤繃紼嬬殑閲嶈佹ラわ紝涔熸槸鎴戝仛璁捐＄殑鎬葷粨銆傛湁鐨勫湴鏂硅茬殑涓嶈︾粏錛屽彲浠ョ浉鍏崇煡璇嗙偣錛屽洜涓哄疄鍦ㄤ笉鎯寵插緱澶緇嗙庯紝鍏繪垚涓嶅仛浼告墜鍏氱殑濂戒範鎯銆
涓嬫湡涓昏佽睲aterial Design璁捐¤勮寖銆
璧勬簮涓嬭澆錛PxCook涓嬭澆閾炬帴錛http://www.fancynode.com.cn/pxcook
浜戠洏璧勬簮錛http://pan..com/s/1eRSOnXg 瀵嗙爜錛50j5
鍖呭惈錛氭柊鐗圕utterman錛岀偣涔濆垏鍥撅紙draw9patch銆丣ava錛
涓嶆槗~
鐣鑼勮捐″尃錛堝叕浼楀彿錛
浣滆咃細鐣鑼
Ⅲ 請問：什麼叫原型設計工具
原型設計工具，說白了就是能夠幫助設計師製作靜態或動態網頁/App設計模型的工具。
在界面設計初級或中期，為了能夠方便和其他設計師討論、測試產品相關的設計想法，需要利用各種原型工具將產品模型做出來，一個個界面修改和迭代，必要的時候，還可以製作成動態的模型，直接測試，看看可能會有哪些問題或不足等。
而且，現在市場上其實有很多好用的原型工具。就像我們團隊用的就是一款叫摹客Mockplus的原型工具。製作原型的時候，不僅提供大量優質模板，還可以直接拖拽各類組件或圖標，按需從頭快速繪制原型。 交互和動畫也可以拖拽添加。 總的來說，使用起來相當簡單。