微信產品設計的原則論文

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

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

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

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

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