當前位置:股票大全官網 - 財經新聞 - 3個UI設計技巧提升用戶體驗

3個UI設計技巧提升用戶體驗

在做用戶界面的時候,我會出現這樣的困惑,什麽樣的界面才是我要設計的呢?有時候要滿足商業需求,又要滿足審美,還要滿足企業需求,我們該如何做取舍呢?什麽樣的界面才是最合適的選擇呢,下面的內容將通過3要素幫助妳分析UI設計中所遇到的這些問題。

視覺的美感,就是需要我們深入了解界面中每個組件的意義與試用的 表現形式,其基本原理 就是如何避免醜,最具代表的是格式塔心理學的六大原則,就是通過陌生影像與存留記憶的 雙重感受 之下,作出美感得到的判斷,我把它稱之為關聯記憶。

因此遵循格式塔的原理,能讓我們設計出美感的界面。 下面我們就來了解壹下格式塔的六大原則。

1、對齊:其本質是完整的形態是對人體美學的探索。

2、對比:對比能讓主要信息壹瞬間跳躍在眼前,但是我們需要控制壹個頁面中的層級在4——6個之中

3、親密:親密顧名思義就是接近性原則,在界面設計當中,可以分割成四個層級,(使用間距-最大,分割線其次,分割條,卡片)。在應用的時候我們也會發現,元素與元素形成的面,也可以理解成間距分割。我們需要註意的壹個點是,任何信息模塊,比如卡片裏面又有很多信息的時候,我們可以通過分割線進行二次分割,所以在實際操作的時候都是穿插使用的。

4、相似:在界面中我們需要遵循相似的規律,不僅是為了美觀性,還能讓開發寫文檔的時候比較方便。所以我們在設計的時候,就需要這些方面對相似原則的運用(色彩、字體、控件、圓角、圖標、投影、分割)設計的時候保持相似。在相似的基礎上,我們需要根據流程的不同,在設計上又要做出形式上的區分,防止相同的流程決策影響用戶的選擇。

案例:比如在設計按鈕的時候,會做實心按鈕、水晶按鈕、幽靈按鈕、文字按鈕、圖標按鈕,根據層次的不同來引導用戶的操作流程。在同壹個頁面設計的時候,我們需要對信息進行歸類,區別出不同的元素,比如為了讓界面更易閱讀,文字的色彩形成壹定的邏輯,標題文字用333333,內容文字用666666,備註文字用999999,根據產品設計適應的色彩。

5、閉合。閉合的原理是因為忍耐具有聯想的作用,因此大腦會將元素聯系成壹個整體,這樣會更便於理解。設計的時候遵循視覺的閉合規律,減少大腦主動聯想閉合的時間,直接提升用戶的視覺體驗。應用就是多進行規則化的設計,通過底色等進行歸類,卡片化設計等。

6、思考。我們都知道讓用戶感覺高級的東西,壹定是用戶壹眼無法看懂的,因此抽象的元素能讓用戶產生思考,但是要註意閱讀性和高級感之間權衡。

這六個美觀性原則,足以讓我們在面對需求的時候,選擇合適的方式,用以達到需求目標,美是壹種工具。

怎麽樣達到美的效果呢?核心就是提高我們產品的品質。我們需要了解到品質感的心理來源,簡單來說就兩點:細節與簡約。這裏需要註意的是簡約不是簡單,而是要揚長避短,所有的這些都是 減少大腦的負擔 ,讓大腦壹眼識別妳想表達的內容。就是把細膩的元素放大,讓用戶壹眼能看到好的壹面,忽視最差的壹面,以此達到簡約而不簡單的目的。那麽細節是怎麽做的呢?

案例:對於圖表,我們有三個方向的影響可讀性與美觀性。第壹個是造型的提取,輪廓壹定明確,其中包視角、圓角大小、斷口原則、傾斜角度、線條粗細。第二個是z軸走查,包括主圖形、輔助元素、背景層。第三個是質感,包括漸變光影角度、投影數值、紋理。

什麽是印象差異,即在美的基礎上,我們如何設計出有自己風格的界面呢?接下來我們來了解壹下什麽是印象差異性。我們的第壹個目標就是深入了解不同屬性間產品的特點及適用設計風格,借助工具挖掘產品獨特的DNA和記憶點。

決定產品風格的因素主要有兩個,壹個是用戶群體(年輕化、老齡化)

案例:鬥魚直播,用戶:需要在情感上增強用戶的粘度,板式松散密度低,色彩豐富,高飽和,圖標有豐富的視覺效果,活動植入多,更註重數據的轉化。新浪財經,用戶:強調操作錢百分之百可預測(防錯優先原則),板式最大的利用空間,緊湊,密度高,圓角小,彰顯權威與可靠,圖標的裝飾比較少,信息傳達清晰。

二是產品的屬性(業務類、內容類、工具類、社交類),補充:如何區分,用坐標軸的方式,社區能力強弱於用戶產生內容的強弱。

1、業務類:豐富——連接人與業務流程(電子商務,團購類,旅遊類),由於內容復雜,導致色彩和交互等板式上餓的豐富,板塊分割都比較嚴重,很少有大面積的留白,因為首屏重要,列出了很多功能入口。

2、內容類:連接信息與人(耐看),用戶以最快的速度獲取最有效的信息。

3、工具類;連接人與事件(易理解),打開產品後的目的很強,壹般是用完後就關閉,壹般內容單調,很多時候采用插畫或者質感的風格,凸顯精致感。

4、社交類:連接人與人(儀式感),因為很多人用才產生的價值,很難爆紅,但是壹旦成功就很難被取代,每個用戶都希望自己被重視。分為熟人陌生人社區。

色彩使用:色彩越少,越顯專業。色彩越多,情感越豐富。色彩越散,產品越不穩重。色彩分布整齊,越專業。飽和度低越專業,飽和度高越娛樂化。

用戶記優先排層次:位置、色彩、形狀、文字。

通過以上的整理,我們深挖產品的DNA,其步驟***四步:確定情感、提取關鍵詞、生成情緒版、營造氛圍。產品孵化出來的模型,包括性格定義、人物模型、產品的DNA,形象ip、細節落地。

在落地的過程中,我們應該怎麽樣做到科學合理呢,目標就是讓界面設計有完善的維度跟方式,具體內容是解讀用戶瀏覽目標,合理的布局視覺路線。科學合理的 核心是信息傳遞 ,包括三個點的傳遞,壹是視覺的基礎體驗合理性,通過科學實驗我們知道瀏覽熱區呈現f行和z行的路線來的,二是用戶能能夠快速獲取信息,落實到界面的時候,需要我們刪減內容,合理布局,做到視覺的層次差異,三是在視覺傳達中也很重要的點,品牌印象於視覺差異,讓品牌瞬間占領用戶的心智。

需要確保每個信息存在的必要性,在設計的過程中記得 查漏補缺 。從流程開始,該頁面屬於哪些流程的內容(流程交互),該流程需要幫用護解決什麽問題(核心表意),用戶需求和產品需求分別是什麽(需求對照),用盡量少的內容解決問題。我們在對信息作需求的篩選的時候,可以使用kano模型就是之前文章的產品分析內容,根據必要信息、期望需求、亮點需求、無差異需求、反向需求的遞減性來刪減信息。

其次要確保信息學的 布局層次和信息層級 的合理性,保證用戶在瀏覽頁面的時候能更快的獲取有用的信息。劃分層次分為兩個步驟:

1、功能板塊優先:根據用戶的意向和頻率,結合kol競品來分析,成功的產品需求需要叠代完善。

2、劃分板塊中的信息層級:使用艾森豪威爾法則,重要跟緊急信息來排序,第2象限適合初創產品用戶核心需求,成熟的產品以第4象限為核心,比如廣告,如果判斷不了,繼續使用kano數據來分析,也可以采用其他因素來進行優先級劃分。

對信息進行整理後,接下來就是 視覺上的層級 劃分,我們要知道界面設計其實是解決問題的階段。最好的壹個層級劃分方式就是對比突出,壹定是有參照系的設計,才能體現出層次。設計界面的時候,需要避免給予用戶過多的選擇,根據席課-海曼定律選擇越多所需時間越長,是不符合用戶體驗特點的(下壹篇會講用戶體驗),因為人腦最多同時處理5-9個事情,如果內容過多,使用分步認知的方式來解決信息過多的問題。視覺上影響用戶優先級的順序如下:位置(瀏覽順序和用戶習慣)-色彩(背景-飽和-多色)-留白(留白越多層次越高)-空間(卡片制造空間)

有效的埋點,根據產品期望 反饋數據 ,引導用戶交互。在這個過程中,我們的目標是引導用戶做出產品想要進行的決策,確定數據的指標除了核心數據,也包括因變量,確定評判的變量,多維度的方案進行評估,包括內容、視覺、交互、情感。

以上就是UI設計的核心3要素,當面對這麽多內容的時候,我們如何使用這些概念呢,我們可以分三次,每次設計的時候把其中壹個點拿出來在界面上反復研究,能對這些內容更有效的使用,才能深入理解。

感謝閱讀,***同進步,用經驗輸出內容,倒逼設計。