從零到壹,讓思路更穩妥

原創文章 分類: 經驗/觀點 版權:
14141 266 410 21
2018-10-25
105.9
首頁推薦


前言


近期有一位朋友問我“什么是設計風格?”,在溝通了解之下,原來是他承接了一款全新的移動端項目,不知該從何設計。這位朋友是剛入行的新人,從0-1的設計對他來說是很難把控的,但是對他卻是一次不錯的經歷。


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

進入流程

l 了解業務

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

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

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

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


l 設計思考

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


Image title


一、顏色

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


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


Image title


·  品牌色


1、有品牌色

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


Image title


2、無品牌色

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


Image title


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


Image title


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


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


問題:
品牌logo的代表色來自某戒網比賽提供,品牌調性不規范,無衍生產品,個人對項目了解不透徹,根據自我喜好,定下深紅色。

思路:
其實遇到這種類型的問題,應該同時考慮平面方面的知識,顏色是否適合該產品,未來的線下物料是否適合承載物。

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


Image title


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

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


·  內容色


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


Image title


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


Image title


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


Image title


顏色參考學習文獻--甲方竟敢說你的配色丑! 我來教你懟回去》


二、 風格


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


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

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


Image title


·  圖標


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


Image title


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


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

舉例:


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


Image title


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

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

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

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


·  規范


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

網格參考學習文獻--《如何利用網格系統科學地打造APP界面》


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


Image title


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

symbol參考學習文獻--《這樣使用Sketch的Symbol功能,能極大提高你的工作效率!》


安裝步驟:


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



Image title

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


Image title


組件參考學習文獻--《螞蟻金服設計平臺》  《ant design》


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


Image title


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


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


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


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


·  情感


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

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

1、啟動頁


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


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


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


Image title


2、引導頁


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

Image title


文字


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


Image title


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

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


設計


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

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


Image title


3、空白頁


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


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


Image title


小結


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


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

Image title


三、 體驗

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

我們在看競品或其他產品時,建議體驗整個APP流程,體驗每個界面的視覺影響,思考為什么有些元素會引導你點擊?為什么主要功能模塊要按該種方式排版?作為用戶,你覺得有哪些不合理的地方?為什么同類產品,在業務發展上會有所不同?...

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


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


總結


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


從0-1的設計,我也是第一次經歷,設計中也有過很多問題,因為經歷了2.0的設計改版,所以結合兩次經歷,得出自己的設計思路。


第一次寫那么長的文章,會有很多不足,希望我的分享能夠對大家有所幫助??


下一篇文章我將分享改版當中遇到的問題和解決辦法,歡迎關注哦

我叫小夢婷

有腹肌的設計師,wx:DY1410006357

127粉絲/77關注

原創小生
你所不了解的底部導航...改版中遇到的那些問題

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

广西福彩官网