3d定独胆百期无错公式 www.qratuj.com.cn

@我叫小夢婷 :近期有一位朋友問我「什么是設計風格?」在溝通后了解到,原來是他承接了一款全新的移動端項目,不知該從何設計。這位朋友是剛入行的新人,從零到一的設計對他來說是很難把控的,但卻是一次不錯的經歷。

正好我承擔的主要項目是從零到一,今年3月份還經歷了一次2.0設計大改版。這款產品是我獨立設計,基本是全棧負責,所以把整個設計過程的思考總結分享出來,一起學習一起共勉。

文章目錄

  • 了解業務
  • 設計思考
  • 顏色
  • 風格
  • 體驗
  • 總結

了解業務

在設計之前,一定要給自己爭取時間進行設計準備工作,而不是一拿到交互就上手設計,無思考的設計是沒有靈魂的。

在接到任務后就要立馬了解業務,知曉產品方向,熟悉用戶畫像等相關信息,了解這些信息后,在后來的設計中,更能站在用戶的角度去看待和總結設計問題。

能最快了解到業務動向的是產品經理那里,當產品經理和交互對接需求的時候,設計師盡量參與到討論當中,而不要等到交互評審的時候才去了解業務。

如果你的項目有競品,那這個資源真的是得天獨厚,它能夠讓你迅速了解產品的商業規劃。當然,最好對競品進行分析,不光從設計,也要從它的體驗和頁面之間的跳轉進行思考。這些過程的積累,能夠幫助你更好的了解交互的內容,在交互中發現問題,提出自己的觀點。(這里不是說讓你去找交互的茬,而是在設計過程中,你能夠對交互的設計有疑問,多與交互進行討論,這樣能夠擴展設計思維,聯想更多的用戶使用場景)。

設計思考

設計的操作,不僅局限于界面的內容,在設計的前期準備中,結合前期對業務的了解,在現有不足的需求內容里,可以先進行風暴式設計(前期飛機稿),有準備的設計,在進入到正式設計后,能夠有備無患,更快的進行調整。設計的前期準備我們可以從3個點入手:

顏色

顏色是整個產品的靈魂,是與用戶最直接的溝通對象,恰當的使用顏色,能夠更準確的引導用戶的操作。

在制定顏色的時候,首先考慮的是品牌色,就是產品最主要的代表色。內容色或者其他輔助色,可以在設計中,進行添加或者調整。

1. 品牌色

有品牌色

已有品牌色,是可以直接運用到設計中,除了原有的品牌色,還可以根據頁面的整體視覺需求,制定合適的輔助色,輔助色一般是用于區分不同標簽、icon、內容等。

無品牌色

品牌色是被賦予意義的,一旦制定后,將會被長期沿用,運用到所有與企業相關的衍生內容,未來基本不會有很大跨色系變化,所以在制定品牌色時要很慎重。每個顏色代表的意義是不一樣的,有些顏色也是某些行業的代表色,所以品牌色可以根據行業類型去制定。

也可以根據用戶類型制定品牌色,OFO小黃車就是典型的例子,打造年輕陽光時尚的騎行平臺,而黃色就是給人輕快,充滿希望和活力的感覺。

還可以根據平臺想給用戶帶去什么樣的感覺制定,這種方式最好是能夠有很多用戶進行體驗驗證,因為顏色是最直接的視覺體驗傳達,所以這種方式制定,要更為嚴謹。

我在項目中遇到的用色問題和思路:

  • 問題:品牌Logo 的代表色來自某戒網比賽提供,品牌調性不規范,無衍生產品,個人對項目了解不透徹,根據自我喜好,定下深紅色。
  • 思路:其實遇到這種類型的問題,應該同時考慮平面方面的知識,顏色是否適合該產品,未來的線下物料是否適合承載物。

我負責的項目目標用戶是卡車司機,為了平臺宣傳,卡車上會貼一些車貼,卡車的顏色有很多,深紅色和藍色是很常見的。但是第一版的項目代表色是深紅色,在同是紅色系的沖突下,則需要調整多種車色同時適用的代表色,所以在項目1-2的設計改版中,我調整了品牌色。

有人會有疑問,為什么定個品牌色還需要考慮線下使用場景?前蘋果設計總監曾舉過一個列子:當初他在黑莓任職,需要開始創建一個新的手機操作系統,從他們最開始的第一天就把工業設計、包裝設計、用戶界面以及市場等全部的核心整合在一起,來創造一套全新的用戶體驗。這是一個很好的例子,要永遠將設計看作企業品牌的一部分。

我們在著手界面設計的時候,需要考慮你所能想到一切的使用場景,顏色是影響用戶的第一元素,形成的產品形象是一直影響品牌形象的,所以在制定代表色時一定要考慮的更全面。

2. 內容色

我一般把字體、背景、分割線等用色分為一類,這類顏色用的比較多的是白到黑之間的色值。我定義的顏色都是100%純色,直接使用顏色的數值。

也有設計師喜歡從#000000純黑色,調整不同的透明度使用,有透明度的顏色在不同顏色背景上會有不同的視覺效果,所以色值在提供給前端人員的時候,還需要進行調整。內容色的制定方法就看設計師的個人習慣來調整了,只要能正常進行開發,視覺效果保持一致即可。

在根據交互設計稿設計頁面的時候,要理解內容的層級,合理的使用顏色。標題、主要內容、提示文字、icon等用色,都會對用戶產生不同的視覺指引,找了幾家社區的界面設計,可以看到不同內容的顏色深淺都是不一樣的,整個視覺是有層次的,所表達的內容也清晰明了,突出重點,弱化次要內容。

認識色彩及配色可閱讀→《甲方竟敢說你的配色丑! 我來教你懟回去(一)》

風格

近年來,大量留白的極簡平面風格流行于各大互聯網平臺,我們需要在趨于一致的風格中找到自己的設計風格,可以從這幾個點進行思考:

  • 瀏覽競品的設計,有助于區分自己的設計想法,從競品設計中脫離。
  • 多看其他產品的界面風格,激發設計靈感。
  • 運用網格系統,創造合適的視覺樣式,規范設計原則。
  • 帶入品牌元素,有助于品牌的宣傳。
  • 加入情感化設計,拉近產品與用戶之間的距離。

從零到一的設計任務量是很大的,需要規劃設計節點,可以先從底部tab 的幾個主要內容先行設計,在設計中,需要從3個主要視覺層入手:

1. 圖標

界面設計中的 icon設計會提高整個界面的視覺和用戶好感度,icon 的風格有剪影圖標、輕擬物圖標、輕質感圖標、文字圖標、疊加圖標、插畫圖標和擬物化圖標。

其中,剪影圖標、輕質感圖標、插畫圖標比較常見,插畫圖標多用于節日類型的宣傳,游戲類app。擬物化、輕擬物圖標的流行趨勢比較早年了,個人認為輕質感是擬物簡化的樣式。疊加類圖標,實際屬于一種創新類樣式設計,不同顏色、線條、或透明度疊加的視覺樣式。

icon設計的風格最終還是由設計師自己來決定,在時間充裕的情況下,設計師可以運用常用的圖標樣式結合產品特點設計出2~3版的飛機稿和團隊人員進行討論,圖標的設計風格上要保持統一性原則。

舉例:三大外賣美食類產品的設計都具備自己的設計風格,從產品首頁的功能區域就能區分出來,項目的功能區是核心區域,通常占據屏幕的22%~25%,該板塊是各類子板塊的入口,為子板塊引導流量,從用戶的視覺來講,該位置是黃金區域,所以業內也有稱為「金剛區」。

關于金剛區的詳細介紹:《用四個步驟,幫你學會金剛區圖標的設計方法》

三款產品的用色總體都是鮮艷明亮的,餓了么用2.5D的設計,貼近擬物設計,增加了細節,能影響著用戶的潛意識,聯想到實際的畫面。

大眾點評的設計是后來新改版的,第一感覺就是時尚,年輕。首頁剛出來的時候,有人說過,首頁的設計顏色艷麗過于喧賓奪主,其實從首頁的每塊內容區域去分析,現有的圖片尺寸是750*1334的尺寸,金剛區、運營區、推薦區基本平均占有內容區的1/3,在大屏幕的情況下,推薦區可視內容會變大,并且大眾的用戶使用目的性很強(查看推薦內容、搜索店鋪付款等),所以金剛區需要新穎的視覺為其他子功能引流。

大眾點評新版背后的設計故事:《長文揭秘!全新的大眾點評V10版本是如何做品牌升級的?》

美團的 icon設計個人認為是比較普遍的,設計穩妥,相對于其他兩款設計,圖標記憶和識別度上相對較弱。

對于從零到一的設計過程,金剛區的設計可以先使用普遍的設計方式,因為金剛區一般都是可配置的( icon可換),上線后,可以再更深入的思考創新。

2. 規范

設計界面時,一定要量化設計規范,了解所承擔的產品適合哪種設計風格。在設計過程中,可以利用網格系統科學的設計界面,很多設計師都會忽略網格的使用,網格系統是設計的骨架,將界面中的元素有序的組織,使整個頁面的設計更加的規范、視覺一致,提高了工作效率。

學習網格系統可閱讀→《如何利用網格系統科學地打造APP界面?來看網易高手的總結!》

為了便于組織設計組件規范,在設計過程中,逐步把字體、圖片、icon等顏色尺寸,內容之間的距離,列表的高度等設計樣式單獨列出來,如果一開始就制作規范,后續的頁面很容易無法沿用。設計圖可以用[email protected]的圖設計(375*667),導出的圖標是[email protected]、[email protected],當然也可以使用[email protected]圖設計,這個看設計師的習慣和團隊的設計規則。

制定規范不僅是讓設計師使用,它更大的作用是方便整個設計團隊和開發團隊之間的溝通,協助開發人員撰寫統一的組件庫,未來開發的時候能夠直接調用。現在 UI設計師設計界面的軟件大多都用 sketch了,sketch 中的 symbol 的功能能夠更方便設計調用組件,提高使用的效率。

symbol的使用可閱讀→《這樣使用 Sketch 的 Symbol 功能,能極大提高你的工作效率!》

安裝步驟:

將組件都分類命名,間隔的符號都用「 / 」(如 list/…),sketch 對其他符號可能會無法識別。

將組件庫文件放在一個固定的位置,桌面或者其他文件夾中,點擊「Add Library」找到組件庫文件,千萬不要刪除,每一次組件庫文件更新都需要重新再安裝一次。

組件參考學習可查閱→《螞蟻金服設計平臺》、《Ant design》

設計制定組件之間的距離大小,組成的界面給用戶的感覺是不一樣的,距離大,留白多的界面,給人的感覺會很高端簡潔,但是整個頁面的內容展示相對就會減少。

這兩款產品都屬于資訊類,資訊類設計在我們的印象里是一個頁面盡可能多展示幾條內容。第一款產品輕芒雜志使用卡片式的設計,卡片內的標題、內容、操作的距離都是比較大的,整個設計風格比較高端,除去頂部狀態和底部導航,在1334px寬度里,展示內容不滿3條。

網易新聞加上頂部狀態、導航和底部導航,整個可視內容還能達到三條半。網易的多內容展示,讓用戶感覺到資訊內容豐富,更有閱讀和翻閱的欲望。

輕芒的視覺很有自己的風格,設計很小眾,與同類產品形成明顯的對比,它的設計風格也是根據用戶特性去定制的。輕芒雜志以興趣來組織內容,而你看到的內容都是經過有品位的人挑選出來的,所以輕芒的大部分用戶是高端有品位人群,這類人群對性冷淡風格很是喜愛。

我們在設計的時候,不能一味的為了好看而好看,但也不能因為用戶接地氣就做的很低端,我們應該在他們的審美中找到平衡,在未來改版中,逐漸的加入更多的美學元素,提高他們的審美。

3. 情感

建議 APP 內的插畫部分在功能頁面完成后設計,先提供主要的設計流程稿,讓前端人員更早的進入開發。

插畫部分有金剛區、引導頁、啟動頁、空白頁提示、底部tab等,啟動頁、引導頁、空白頁提示則是能加入更多情感元素設計的頁面。有很多 UI設計師的視覺插畫能力是不足的,作為設計師,我們的主要職責是更應該重視視覺層,它不僅是產品設計中重要的一部分,也是設計師個人能力的體現。

啟動頁

啟動頁是 APP 啟動過程中第一個見到的頁面,這是啟動過程中必然存在的一個頁面,所以需要放一張圖替代啟動中的空白。作為與用戶第一個照面的內容,最好就是宣傳企業文化,logo和宣傳標語,就是給用戶最好的自我介紹。

企鵝FM和閑魚將吉祥物運用到設計當中,擬人化的動作表情和可愛的模樣,使人印象深刻。吉祥物是企業品牌的化身和象征,被賦予美好的意義,在信息傳播中不僅吸引用戶的目光,也拉近與用戶的距離,更有助于企業品牌文化的宣傳。

百度閱讀則用一盞燈的形象,一句貼心的話,很是應景;百度閱讀的啟動頁還有其他的場景,每一次啟動都讓人眼前一亮,使人內心平靜。

引導頁

引導頁的內容一般是整個項目的簡介或重要功能的描述,頁數在3-5張,引導頁上的文案要簡單易懂,每頁的文案都要取其精髓。引導頁的設計樣式是很自由的,那我們該如何加入情感化內容?

文字:好的文字是能戳人內心帶來情感的,百度閱讀的文案,讓我覺得讀書是一件文藝舒心,能夠改變生活的事,配合清新的插圖,很有代入感,讓人產生共鳴。

但并不是所有的項目都是這種高大上走心的產品,比如金融類、教育類、醫療類等,引導頁的文字很多會從用戶痛點出發,擊中癢點,告訴用戶你在這里能解決什么問題,平臺能給你帶來什么。

文案不是設計師提供,但是設計師也要對文案有所理解,也需要站在用戶的角度體驗文案能否讓你產生共鳴。在時間充足的情況下,可以協助產品,與團隊一起腦暴。

設計:如何設計?設計什么風格?這些問題就跟設計師的個人經驗和能力有關了。設計的元素要與所提供的文案環境一致,這樣更便于用戶的理解,即使不用看文字,觀看畫面就知道所要表達的內容,要讓你的設計會說話。

我們可以從一款金融APP 去解析,從第一張引導圖設計中,有秒鐘、儲蓄罐、錢幣,它告訴我們在該平臺投資能夠更快的賺錢。第二張圖有上升的標尺、錢幣、保險柜,它告訴我們在該平臺投資是安全的,他們有嚴謹的安保功能。第三張圖,就是暢想生活安逸的畫面。圖的含義跟文字的含義也很貼近,很清晰給用戶表達了想要表達的意思。

空白頁

提示是在頁面沒有內容的情況下,所展示的提示內容。該頁可以單純的文字提示(易缺少情感),也可以插圖配文字。

空白頁的插圖風格需要保持視覺一致性,若有吉祥物,建議多使用吉祥物作為插畫元素,不僅達到情感化目的,也宣傳了品牌文化。若沒有吉祥物,設計中則可以加一些人物元素,同樣也能夠達到目的。

小結

底部tab 的幾個主要頁面設計出來后,整個 APP 的視覺風格就出來了,圖標樣式也是整個視覺的影響因素。從 iphone6 界面恢復圓角設計以來,很多 APP 的設計風格就開始改版成圓角風,擁有大量級用戶的淘寶,是最快發現樣式改變的。

手淘的改版過程揭秘:《手機淘寶2017年大改版,UED 團隊回顧幕后設計思路》

當然,總會有些產品是特立獨行的,百度錢包就是最好的例子,直角橫行,它屬于金融類產品,使用直角的設計樣式,給用戶嚴謹、認真的感受,這種感受,也應該是金融行業所秉承的態度和目標。

體驗

這一步是輔助思考,當然這也是成為優秀 UI設計師的必經之路。

我們在看競品或其他產品時,建議體驗整個 APP 流程,體驗每個界面的視覺影響,思考為什么有些元素會引導你點擊?為什么主要功能??橐錘彌址絞腳虐??作為用戶,你覺得有哪些不合理的地方?為什么同類產品,在業務發展上會有所不同?等等。

多面的疑問和自行解決的鍛煉,在未來設計想法上會更專業,也能更好的描述自己的設計想法。

很多剛入門的 UI設計師不知道該體驗哪些產品,沒有方向,推薦大家,可以在設計網站看優秀設計師的 UI 類分享,對應文章中被舉例的 APP,與優秀設計師共同思考。

更具體的方法參考:《這樣才能學到東西!UI設計師該如何正確地“把玩”APP?》

總結

學習是日積月累的事情,從0-1是很好的歷程。在上述的分享中,我是以全棧的設計思維思考的,全棧設計師已成為主流,深處互聯網行業的我們,不能只低頭看到自己的一畝三分地,要多研究數據和用戶的真實場景,當然也要研究跟自己未來發展息息相關的行業變化。

從零到一的設計,我也是第一次經歷,設計中也有過很多問題,因為經歷了2.0的設計改版,所以結合兩次經歷,得出自己的設計思路。希望對大家有所幫助。

本文已獲得作者授權原創發布于公眾號「小阿田的設計筆記」,未經許可,禁止轉載。

「從零開始設計一款APP系列好文」

點贊 5
收藏 183
繼續閱讀相關文章

發表評論 已發布 7

還可以輸入 800 個字
 
 
載入中....
7 收藏