亚洲欧洲日产国码无码久久99_在线看国产视频_超碰成人在线观看_欧美精品18videos性欧_国产一区国产二区国产三区_亚洲xxx自由成熟_99在线精品视频在线观看_97久久夜色精品国产九色_欧美少妇性xxxx_在线观看国产成人av片_国精产品999国精产品官网_在线欧美亚洲

格式塔原則

通俗地說格式塔就是知覺的最終結果。是我們在心不在焉與沒有引入反思的現象學狀態時的知覺。

格式塔原則包含五個特性，分別為：相近性、相似性、封閉性、連續性和簡單性。

1.相近性：人們會將距離相近的部分潛意識當作一個整體。例如下圖所示。左側距離都相同，人們會認為是一個整體，右側三四列和一二列相隔較遠，人們會認為這是兩部分。

例如：印象筆記拍照設置界面，保存照片到你添加到筆記的照片備份到相機膠卷。距離保存照片卡片距離較近，所以用戶會認為這個是針對保存照片的提示語。

2.相似性：人們會將相似的部分，當做一個分組整體。例如下圖，一組圓形，人們會當做一個組成部分。一組矩形，人們會當做另一組組成部分。

例如：支付寶首頁界面。掃一掃、付錢、收錢、卡包這四組相似的布局和icon，人們會當做一個分組。下方的轉賬、花唄、芝麻信用、淘票票電影等宮格導航，人們會當做另一個分組。

3.封閉性：元素處于一個封閉空間，人們會將各個部分趨于組成整體。例如圓形被線框包圍，人們會將這個當作一個整體。

例如：新浪微博國際版，通過卡片來分割一條微博信息動態，這樣和其他微博可以產生強烈區分，卡片的好處就是可以容納更多的操作和信息。

4.連續性：人們傾向于完整的連成一個圖形，而不是觀察殘缺的線條或者形狀。

例如：app store 卡片展示，卡片因為露出一部分，用戶有一種連續性的感知，人們知道右邊還有卡片，用戶就會嘗試用手拖動卡片，查看更多卡片信息。

5.簡單性：具有對稱、規則的簡單圖形特征各部分趨于組成整體。

支付寶首頁，各個功能模塊具有對稱、規則的簡單性。

菲茲原則

任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。

得到結論：越是重要按鈕，按鈕要越大，這樣操作時間就越短，越方便。位置距離用戶操作越近，這樣用戶越易點擊。

類似音樂類產品，都是將播放/暫停做的比上一首下一首做的大，同時放置于底部，目的就是方便用戶快速點擊。

奧卡姆剃刀法則

這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。若無必要，勿增實體。

不必要的元素會導致設計效率的降低，并且會增加不可預期的后果。在設計中我們可以去掉不必要的干擾元素，這樣頁面會比較純粹、簡潔。

例如：下圖所示，左圖為螞蟻借唄，里面信息字段較多，需要用戶多次進行選擇。

而右側為微信的微粒貸，用戶只需要選擇還款期數即可，微信的微粒貸操作簡單，用戶在整個流程體驗過程中流程，沒有停頓感。從業務層面來說，螞蟻借唄因為需要收集用戶盡可能多的信息，所以字段信息比較大，而微粒貸卻不需要。

詳情請登陸ant design的網站查看：ant.design.com。里面都有詳細的案例，方便大家理解和掌握

Ant Design設計原則一共包含10條，分別為：親密性、對齊、對比、重復、直截了當、足不出戶、簡化交互、提供邀請、巧用過渡、即時反應。

1.親密性：如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。

2.對齊：正如『格式塔學派』中的連續律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。

3.對比：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。

4.重復：相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。

5.直截了當：正如 Alan Cooper 所言：『需要在哪里輸出，就要允許在哪里輸入』。這就是直接操作的原理。eg：不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。

6.足不出戶：能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉都會引起變化盲視（Change Blindness），導致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。

7.簡化交互：根據費茨法則（Fitts’s Law）所描述的，如果用戶鼠標移動距離越少、對象相對目標越大，那么用戶越容易操作。通過運用上下文工具（即：放在內容中的操作工具），使內容和操作融合，從而簡化交互。

8.提供邀請：很多富交互模式（eg：『拖放』、『行內編輯』、『上下文工具』）都有一個共同問題，就是缺少易發現性。所以『提供邀請』是成功完成人機交互的關鍵所在。

邀請就是引導用戶進入下一個交互層次的提醒和暗示，通常包括意符（eg：實時的提示信息）和可供性，以表明在下一個界面可以做什么。當可供性中可感知的部分（Perceived Affordance）表現為意符時，人機交互的過程往往更加自然、順暢。

9.巧用過渡：人腦灰質（Gray Matter）會對動態的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當的加入一些過渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。

10.即時反應：『提供邀請』的強大體現在交互之前給出反饋，解決易發現性問題；『巧用過渡』的有用體現在它能夠在交互期間為用戶提供視覺反饋；『即時反應』的重要性體現在交互之后立即給出反饋。

就像『牛頓第三定律』所描述作用力和反作用一樣，用戶進行了操作或者內部數據發生了變化，系統就應該立即有一個對應的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。

原帖請查看微信小程序設計指南官方網站：https://developers.weixin.qq.com/miniprogram/design/

基于微信小程序輕快的特點，我們擬定了小程序界面設計指南和建議。設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內，建立友好、高效、一致的用戶體驗，同時最大程度適應和支持不同需求，實現用戶與小程序服務方的共贏。

微信小程序設計原則分為四部分，分別為：友好禮貌、清晰明確、便捷優雅和統一穩定。

友好禮貌

為了避免用戶在微信中使用小程序服務時，注意力被周圍復雜環境干擾，小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶進行操作。

1.突出重點：每個頁面都應有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下，應盡量避免頁面上出現其它與用戶的決策和操作無關的干擾因素。

2.流程明確：為了讓用戶順暢地使用頁面，在用戶進行某一個操作流程時，應避免出現用戶目標流程之外的內容而打斷用戶。

清晰明確

一旦用戶進入我們的小程序頁面，我們就有責任和義務清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路，這樣才能為用戶提供安全且愉悅的使用體驗。

1.導航明確，來去自如：導航是確保用戶在網頁中瀏覽跳轉時不迷路的最關鍵因素。導航需要告訴用戶，當前在哪，可以去哪，如何回去等問題。微信在小程序內現不提供統一導航欄樣式，開發者可根據需要自行設計小程序首頁和次級頁面界面導航。建議所有的次級頁面左上角提供返回上一級頁面操作。此外，微信iOS用戶還可通過界面邊緣向右滑動操作，返回上一級小程序或微信頁面。安卓用戶可通過物理返回鍵達到同樣目的。

小程序菜單：小程序的所有頁面，包括小程序內嵌網頁和插件，微信都會在其右上角放置官方小程序菜單，樣式如圖。開發者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁面設計風格。官方小程序菜單將放置在界面固定位置，開發者在設計界面時請預留出該區域空間，若需要在此區域附近放置可交互元素，要特別注意交互事件是否會沖突，操作是否容易被使用 。

小程序菜單深淺配色方案（iOS和Android）：開發者可在滿足可用性的前提下，從微信提供的深淺兩套配色的小程序菜單中選擇合適的方案，以適應小程序頁面設計風格。

頁面內導航：開發者可根據自身功能設計需要在頁面內添加自有導航。并保持不同頁面間導航一致，指向清晰，有路可退。受限于手機屏幕尺寸的限制，小程序頁面的導航應盡量簡單。建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。

開發者可為小程序頁面添加標簽分頁（Tab）導航。標簽分頁欄可固定在頁面頂部或者底部，便于用戶在不同的分頁間做切換。標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項。一個頁面也不應出現一組以上的標簽分頁欄。

其中小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。開發時可自定義圖標樣式、標簽文案以及文案顏色等，具體設置項如圖標尺寸等參考可參考開發文檔和WeUI基礎控件庫。

頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中，務必注意保持分頁欄標簽的可用性、可視性和可操作性。

2.減少等待，反饋及時：頁面的過長時間的等待會引起用戶的不良情緒，使用微信小程序項目提供的技術已能很大程度縮短等待時間。即便如此，當不可避免的出現了加載和等待的時候，需要予以及時的反饋以舒緩用戶等待的不良情緒。

啟動頁加載：小程序啟動頁是小程序在微信內一定程度上展現品牌特征的頁面之一。本頁面將突出展示小程序品牌特征和加載狀態。啟動頁除品牌標志（Logo）展示外，頁面上的其他所有元素如加載進度指示，均由微信統一提供且不能更改，無需開發者開發。

頁面下拉刷新加載：在微信小程序內，微信提供標準的頁面下拉刷新加載能力和樣式，開發者無需自行開發。

頁面內加載反饋：開發者可在小程序里自定義頁面內容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應該盡可能簡潔，并使用簡單動畫告知用戶加載過程。

模態加載：模態的加載樣式將覆蓋整個頁面的，由于無法明確告知具體加載的位置或內容將可能引起用戶的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態的加載。

局部加載反饋：局部加載反饋即只在觸發加載的頁面局部進行反饋，這樣的反饋機制更加有針對性，頁面跳動小，是微信推薦的反饋方式。例如：

(責任編輯：PS家園網)