微信產品設計的原則論文

微信產品設計的原則論文

　　在這裡以微信為例，談談產品設計的基本原則。使用者看重的是產品的概念模型，強呼叫戶體驗，即產品如何設計，為使用者體驗服務。使用者體驗就是產品的核心競爭力，就是產品的生命力。所以，要想懂得如何產品設計，需要了解使用者體驗主要有哪些分類，才能更好地根據每個使用者體驗分類進行相應的產品設計。感觀體驗：呈現給使用者視聽上的體驗，強調舒適性。一般在色彩、聲音、影象、文字內容和網站佈局等呈現。互動使用者體驗：介面給使用者使用、交流過程的體驗，強調互動、互動特性。互動體驗的過程貫穿瀏覽、點選、輸入和輸出等過程給訪客產生的體驗。情感使用者體驗：給使用者心理上的體驗，強調心理認可度。讓使用者透過站點能認同、抒發自己的內在情感，那說明使用者體驗效果較深。情感體驗的昇華是口碑的傳播，形成一種高度的情感認可效應。使用者體驗分類對應的產品設計強調舒適性，主要是色彩、佈局等呈現。色彩主要是UI設計師設計，佈局主要是控制元件的對齊等基本設計，即產品設計的四大基本原則。強調互動性，主要是人機的互動反饋過程，即產品設計的可用性原則。強調心理認可，主要是情感認可，也就是產品設計的情感化設計。四大基本原則產品設計的四大基本原則：親密性、對齊、重複和對比。

　　四大基本原則的應用思路：把資訊歸入邏輯親密性，利用對齊，找到並製造重複元素，加入對比。親密性（Proximity）彼此相關的項應當靠近，歸組在一起，建立更近的親密性。親密性的根本目的是實現組織性。如果多個項相互之間存在很近的親密性（親密性意味著存在關聯），他們就會成為一個視覺單元，而不是多個孤立的元素。這有助於組織資訊，減少混亂，為讀者提供清晰的結構，這樣頁面的理解和視覺上都變得更有條理，更能表達資訊。另外，親密性原則可以使頁面產生相應的空白，空白既可以表達關係（說明項與項的關係），也可以使頁面看上去有更多的空間，頁面不會顯得擁擠（眼睛得到休息），頁面更美觀（有條理），這樣頁面的佈局會變得更有組織。案例：微信的發現頁面，掃一掃主要是二維碼/條碼、街景、翻譯的掃描上的識別，搖一搖主要是人、歌曲的搖一搖上的識別，存在著識別的關聯，所以歸組在一起，形成一個視覺單元。頁面上的'空白條，使得每個視覺單元更加清晰，頁面更有組織性。如下圖所示：對齊（Alignment）任何東西都不能在頁面隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯絡，這樣可以建立一種清晰、精巧而且清爽的外觀。對齊的根本目的是使頁面統一而且有條理。如果頁面上的一些項是對齊的，這會得到一個更內聚的單元，即使對齊的元素物理位置是彼此分離的，但在你眼裡，他們之間也會有一條看不見的線把彼此連在一起。對齊主要有左對齊、居中對齊、右對齊。居中對齊的線條比較“軟”，會建立一種更正式、更穩重的外觀，顯得更為中規中矩，但通常會乏味；左對齊或者右對齊的線條比較“硬”，線條更明確，這樣外觀會更清晰、效果更分明。所以我們可以看到頁面上的對齊主要採用左右對齊。注意事項一定要堅持一個原則：只使用一種對齊方式。因為我們眼睛都喜歡看有序的事物，這會給人一種平靜、安全的感覺。此外會有助於表達資訊，另外也要儘量避免居中對齊（除非有意而為）。案例：微信強調熟人社交關係、安全，但居中對齊強調的是正式且乏味，與微信的定位違背，所以微信每個頁面都採用左對齊（左對齊符合閱讀習慣，更能便捷找到閱讀的起點）。重複（Repetition）讓設計中的視覺要素在整個作品中重複出現。可以重複顏色、形狀、材質、空間關係、線寬、字型、大小和圖片，等等。這樣一來，要素都一致，各個部分看起來都是一體的，即能增加條理性，還可以加強統一性。重複的根本目的是統一，並增強視覺效果。

　　重複會為產品帶來一種專業性和權威性，會使使用者感覺有人在負責，因為重複顯然是一種經過深思熟慮的設計決策。案例：微信每個頁面上，左對齊的重複、字型的樣式的重複、線條的樣式的重複、空白條的樣式的重複……注意，重複並不代表完全相同，而是存在明確關聯的緊密相關的物件。微信首頁列表中，朋友聊天列表和服務號的字型相同，但顏色不同（多樣性的統一）。微信的發現頁面，各個視覺要素的重複，如左圖所示。對比（Con-trast）頁面上的不同元素之間要有對比效果，達到吸引讀者的對比效果。要避免頁面上的元素太過相似。如果元素（字型、顏色、大小、線寬、形狀和空間等）不相同，那就乾脆讓它們截然不同。要讓頁面引人注目，對比通常是最重要的一個因素，正是它能使讀者首先看這個頁面。對比的根本目的是增強頁面的效果（更有可讀性），有助於資訊的組織（防止混淆）。對比不僅可以用來吸引眼球，還可以用來組織資訊、清晰層級、在頁面上指引使用者，並且製造焦點。

　　案例：微信的聊天視窗，對話資訊文字的底色的對比，資訊文字與背景的底色的對比。需要注意的是，這些設計原則需要合理搭配才會有好的整理效果，設計頁面時很少只使用某一種原則。而且，需要注意四大原則的應用思路：把資訊歸入邏輯親密性，利用對齊，找到並製造重複元素，加入對比。案例：微信的發現頁面，使用了親密性形成多個視覺單元，實現組織性；再利用左對齊，形成清晰的外觀，使得頁面統一且有條理；再利用重複，使得頁面專業，增強視覺效果；最後再利用對比，即空白條和視覺單元的底色的對比，使得頁面更有可讀性。可用性原則尼爾森的可用性原則強調易用性，是互動設計的重要參考標準。狀態可見原則（Visibilityofsystemstatus）使用者在系統上的任何操作，不論是單擊、滾動還是按下鍵盤，系統應即時給出反饋。“即時”是指使用者可以接受的等待時間（reasonabletime）。案例：微信的傳送資訊時，資訊文字左邊有個半透明白灰色的轉輪給出傳送中的反饋，傳送失敗時會出現紅色感嘆圓給出傳送失敗的反饋。點選微信右上角+，即時顯示相應的操作按鈕的反饋。環境貼切原則（Matchbetweensystemandtherealworld）系統的一切表現和表述，應該儘可能貼近使用者所在的環境，而不要使用系統的語言。《iPhone人機互動指南》裡提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。案例：微信的發現頁面，每個子功能的圖示和表述都貼切使用者的環境，圖示採用擬物化，表述採用使用者熟悉的語言。撤銷重做原則（Usercontrolandfreedom）為了避免使用者的誤用和誤擊，系統應該提供撤銷和重做功能。

　　案例：微信的導航欄切換、頁面返回。聊天視窗誤發信息，支援撤回資訊。一致性原則（Consistencyandstandards）同一用語、功能、操作保持一致。案例：搖一搖功能，開啟搖一搖的頁面，icon保持一致。防錯原則（Errorprevention）透過系統的設計、重組或特別安排，防止使用者出錯。案例：微信的附近的人功能，使用會彈窗提示，提示使用者位置資訊會洩漏，防止使用者出錯。