濟南UI培訓
達內濟南趵突泉中心

17343065216

熱門課程

用五年經驗換來的,超實用 UI 設計四原則

  • 時間:2019-06-21
  • 發布:濟南UI培訓
  • 來源:濟南UI培訓

從少年到大叔,只用了5年,還記得我剛入職的第一份工作的導師和我說:「設計沒有什么捷徑,有的只是多看、多想、多做,邏輯思維明確了,思路清晰了,累積多了,項目方案就好解決了」。在5年的工作中,也累積了一些心得,下面就和大家聊聊我對 UI設計的幾點心得和一些啟發。

用五年經驗換來的,超實用 UI 設計四原則

1. 產品思路要吃透

詳細地分析需求,能讓設計師更好的把握產品的思路。多看需求中交互或產品給出的產品流程圖,在初步的交互結構圖中,可以根據需求大致的構造頁面的布局和排版,把頁面內容布局和排版記入心中,為整個項目打下一個埋點,為將來設計創作時找設計參考打好基礎。

2. 換位思考很重要

分析需求時,需要更多的站在交互或產品經理的角度上去看待問題,多看交互流程圖,多想產品的邏輯思維,消化交互(產品經理)的整個產品引導意向。例如之前小編做過的一個案例,項目為智能家居管理和操控的 APP,在頁面里有搜索框,但是基于公司本身的業務和硬件接入最多就二十個左右,兩三屏的滾動查看就看完,對于本身的搜索意義不大。但對于產品經理,在產品的延伸性和前瞻性來看,這功能必須要有,所以了解了產品的意圖和產品經理的思路,我做出了如下的修改:

把搜索框隱藏起來做為按鈕,當用戶需要時點擊按鈕,跳出搜索內容界面,這樣就可以把屏幕空間多留給主要功能展示,同時讓頁面布局嚴謹不零碎。

思維清晰

1. 分析用戶使用人群

我們在做產品之前,首先要分析產品內在需求和使用人群,為了更好的對用戶動機深挖,最好搭建產品架構分析圖和目標用戶動機分析圖,這樣帶邏輯性地去分析,對于我們前期做設計推導和產品初步的風格落實起到更好的數據支撐。例如下面就是我們團隊對于現有的一個 APP 功能深挖的分析圖以及一些目標用戶的行為分析。

把一些點列出來,預估會發生的事件,預估我們產品因為事件的走向,以及功能使用場景指向等發生的事件都例舉出來,這樣對于我們定義視覺風格時更利于站在用戶角度考慮用戶需要什么,我們設立的風格對用戶行為動機產生什么影響。

2. 分析產品功能屬性

對于人,我們往往根據他的性格、年齡、打扮,職業等,給他貼上標簽屬性。例如一個女生打扮性感,我們會給她貼「御姐范」。年紀小打扮可愛的會貼屬性「蘿莉」「軟妹子」。同時我們產品也是有對應的屬性之分,一個產品往往根據自身主打功能來歸屬他的標簽屬性。例如產品有專屬與固定職業使用的我們稱為工具類app;有分享、語音、人與人之間互動的我們稱為社交類app;集采購、買賣東西的我們稱為電商類app。這些種種的類別屬性劃分,在這個類別下還有細分屬性的劃分,我們往下延伸引導。例如這個app是社交類的,那它的主打是「男性」?「女性」?「兩性」?「老年人」?「年輕人」?如果確定是女性那主打的是什么年齡層次女性,是「15-25」?「25-35」?「35-45」?這些等等的往下細分屬性,面對--這樣我們可以用一個思維導圖分析,深入剖析我們想要的數據。

這樣一層層深入挖掘分析,最后合理的得出使用人群的偏好、屬性、使用場景,這樣帶邏輯的一層一層往下走對于我們定義一款新的 App 產品的設計風格有更明確的指引作用。

邏輯流暢

1. 把握頁面節奏

音樂節奏會帶動人的心情高低起伏,那么什么是頁面的節奏呢?我們說頁面的節奏是指我們頁面布局怎么去分割,給予用戶什么樣的視覺體驗,讓用戶第一眼看到什么,第二眼知道有什么,第三眼發現什么,都是我們視覺思路明確帶著用戶去體驗的。

在層級關系上,我們要拿捏規劃好,主推功能內容和附帶功能內容還有運營需要達到什么效果,都是需要明確的思路帶用戶往下走的,下面是小編之前做過的一個案例:

公司的主打產品是硬件銷售,而且明星產品是路由器,所以才衍生了這個共享Wi-Fi app,我們硬件用戶基數比較大,所以主要是購買了我們的路由器都可以下載這個 app,把自己家多余的 Wi-Fi流量分享出去得到一些報酬。

在表面上我們看似是一個共享功能的app,其實我們的潛功能目的是為了通過 app 把用戶導入商城購買硬件,所以在主要頁面上我們把廣告位特別突出,弱化了主要的連接功能,讓用戶使用連接功能時先看到商城優惠信息,同時文案引導去連接Wi-Fi的用戶,讓其產生疑問「干嘛不自己再買個路由器去分享Wi-Fi增加收益」的心理動機,所以在頁面視覺上我第一眼讓用戶看見廣告,第二眼知道有Wi-Fi連接功能,第三再發現怎么去使用我們Wi-Fi功能,這樣一步一步讓用戶跟著我設計思路的節奏走。

產品邏輯思路明確,用戶就會知道他處在當前位置應該操作什么,下一步該做什么。

2. 尊敬交互邏輯

在比賽上,我們說要尊敬對手,其實在共事中,我們也需要尊重交互設計的交互流程圖,不要隨意更改交互邏輯,如果產生歧義要合理溝通,找解決方案,所以這時候我們在前面講到的在產品分析上吃透產品需求了,可以從產品上出發和交互探討,目的達到一致才可以更改。如果我們只是為了視覺上的效果好看而去更改交互,讓整個 app 交互處于不流暢、不合理是不對的。

小編曾經碰到一個剛轉型的 UI設計師,因為頁面有很多選擇項的功能,需要一一選擇點擊彈出不同彈窗給用戶選擇對應的內容,因為選擇項的功能比較多。在頁面布局上不好對齊和平衡,結果他把幾個不同功能選擇的彈出組件合成一個,在彈出選擇的組件上加選擇項分區,這樣做后在用戶角度上,用戶選擇了第一個功能選項卻把下面的未知功能都選擇了,模糊了用戶當前使用位置,讓用戶陷入了不知下一步怎么操作,怎么往下走,這種交互中斷的UI是不合理的。因為現有的app,很多用戶的使用習慣已經完成慣性的邏輯思維,我們想創新交互,必須在現有的基礎上改良或修改,而且是必須合理的,這樣才不會讓用戶在使用產品過程中產生疑惑或焦慮。

在視覺設計時,我們設計師應該跳出設計思維的誤區,不要想著我們設計把頁面做好看就可以了,其他的不是我負責的就不管了,往往這樣是錯的,把頁面做得好看是我們的基本責任,把頁面做得好看又好用才是我們要達到的最終目標。所以我們設計師應該多學習交互邏輯和熟悉產品思路,這樣做出來的作品才是有靈魂的。

3. 規范細化

規范對于我們設計的核心就是靈魂,視覺上游對接交互(產品經理),下游對接開發人員,它都起到闡述設計的規范化、統一化,讓外人可以讀懂我們設計的邏輯思路。

規范細化在交接工作中也會起到高效率的溝通對接橋梁,所以在設計好頁面時我們應該細化地整理輸出一份設計規范,規定「標題」「副標題」「正文」等一系列共同使用的組件的大小、狀態、間距都是有共通性,邏輯性的,這樣開發在寫頁面過程中知道我們設計規范里的共通點,在實現頁面中就會有底,知道注意哪些點的字號用多少,間距是多少等等,我們后期驗收工作也會減少很多勞動力。同時在我們設計與程序之間慢慢地建立合作默契,完成以后工作任務也達到事半功倍的效果。

沉淀積累

1. 關注用戶數據和反饋

項目的上線不意味著我們的任務已經完成,打造一個優秀的app 是要不斷地迭代和完善的,app上線后真正的接觸了用戶,用戶的使用數據和反饋才是檢驗我們勞動成果的最真實證據。

上線后我們設計需要多關注用戶的使用數據,關注功能點擊率和留存率,多查看app商城用戶評分,認真看反饋的評論和后臺收集的用戶意見,這些最貼近用戶的真實反饋,累積下來處理,是我們下次迭代的動力,這樣一步步根據用戶的體驗去優化的產品,才是真正意義上的一個優秀app產品。

2. 做好項目總結

所謂總結寫得好,加分又加獎,設計師必須把自己做項目的設計思維表達出來,把自己設計中所踩的坑、埋的坑,條理分明的例舉出來,避免下次迭代和其他項目再犯同樣錯誤,同時項目亮點也可以記錄說明,這樣下次再做項目,吸取之前的成功經驗,避開踩過的坑,更利于我們做好每一個產品,提高工作效率。

用五年經驗換來的,超實用 UI 設計四原則

總結

以上幾點是小編在工作中血與淚的教訓得出的經驗。UI設計與其他視覺的區分可能就是更多的考慮可玩性、使用性、耐用性,比視覺第一沖擊力還重要。

以上就是濟南UI培訓給大家做的內容詳解,更多關于IT知識的學習,請繼續關注濟南UI培訓

上一篇:世界上最受歡迎的 React UI 框架Material-UI
下一篇:聽說UI設計師很賺錢啊,真的假的?

馬上預約七天免費體驗課

姓名:

電話:

UI設計的美術基礎之透視篇

聽說UI設計師很賺錢啊,真的假的?

用五年經驗換來的,超實用 UI 設計四原則

世界上最受歡迎的 React UI 框架Material-UI

選擇城市和中心
江西省

貴州省

廣西省

海南省

達內教育

有位老師想和您聊一聊

香蕉www.5.app网页