剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

作為視覺設(shè)計(jì)師,需要經(jīng)常做一些概念設(shè)計(jì),設(shè)計(jì)探索,來(lái)嘗試新的解決方案。很多剛畢業(yè)的設(shè)計(jì)師沒有很好的實(shí)際項(xiàng)目案例,通過概念設(shè)計(jì)或者Redesign能很好的幫助他們?nèi)ダ斫庖粋€(gè)產(chǎn)品,像真正做產(chǎn)品一樣去設(shè)計(jì)每一個(gè)頁(yè)面,最近看了些設(shè)計(jì)師作品集,發(fā)現(xiàn)很多新人常見的問題,給大家分享下,順便

文中引用的一些案例,沒有貶低任何人之意,只是表達(dá)觀點(diǎn)。

為了視覺效果而做

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

這個(gè)設(shè)計(jì)應(yīng)該很多人做過,想問拋開圖片以外,它的設(shè)計(jì)創(chuàng)意在什么地方,我覺得這個(gè)設(shè)計(jì)師找圖片的時(shí)間應(yīng)該比設(shè)計(jì)時(shí)間長(zhǎng),但是這個(gè)設(shè)計(jì)解決了什么問題?我們無(wú)法看出。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

還有這種都是單頁(yè),想問如果落地后,換成正常的圖片會(huì)是什么樣?是純粹追求視覺效果嗎?作為體驗(yàn)設(shè)計(jì)師,我們工作并不是去創(chuàng)造一個(gè)好看的圖片,而是需要去滿足一些需求,鼓勵(lì)用戶去使用,設(shè)計(jì)師需要假設(shè)一些設(shè)計(jì)場(chǎng)景,將這些為前提你的設(shè)計(jì)才有意義。

為了加強(qiáng)項(xiàng)目經(jīng)驗(yàn)

很多公司招聘都需要設(shè)計(jì)師有項(xiàng)目經(jīng)驗(yàn),所以作品集不夠豐富的設(shè)計(jì)師,會(huì)去做概念設(shè)計(jì),Redsign一些知名項(xiàng)目設(shè)計(jì),比如微信、淘寶、facebook等等。但是很多概念設(shè)計(jì)方案,往往沒有體現(xiàn)優(yōu)勢(shì),反而暴露很多視覺缺陷。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

這個(gè)微信概念設(shè)計(jì),顏色很明亮、絢麗,但是有個(gè)問題,用戶在這個(gè)頁(yè)面更多是關(guān)注輸入的內(nèi)容,這里運(yùn)用這么強(qiáng)的選中效果,很明顯干擾了整個(gè)輸入體驗(yàn)。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

還有這個(gè)設(shè)計(jì),很好的運(yùn)用了品牌色,很大膽,看起來(lái)不錯(cuò),但是設(shè)計(jì)上很重,大面積的綠色讓人長(zhǎng)期使用會(huì)視覺疲勞。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

這個(gè)設(shè)計(jì),視覺效果來(lái)說非常的好,圖形細(xì)節(jié)、圖形飽和度都很舒適,但是忽略了「品牌感」,微信的品牌沒有體現(xiàn),遮住Wechat是否還能分辨出它是微信?可以說它是momo、是微博或者任何一個(gè)社交產(chǎn)品。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

再來(lái)看一些國(guó)外的設(shè)計(jì),這個(gè)視覺效果很好,配色大膽,紫色和紅色的搭配在左側(cè)面板上,但是我們應(yīng)該更加鼓勵(lì)用戶把注意力放在對(duì)話面板而不是列表上面,設(shè)計(jì)師可能覺得這個(gè)配色很酷,但是并沒有幫助我們解決設(shè)計(jì)問題,用戶并不會(huì)因?yàn)槟愕脑O(shè)計(jì)很酷,而對(duì)你的設(shè)計(jì)買單。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

這個(gè)設(shè)計(jì)配色大膽,布局卡片式,用戶焦點(diǎn)也很明顯,但問題是改變了用戶的使用習(xí)慣,把常用的功能都放到了下方,同時(shí)右上角、左上角的一些功能習(xí)慣全部改掉了。

我們?nèi)绾稳プ龈拍钤O(shè)計(jì)?

可能很多人看到這里會(huì)想說,說了那么多,我們?cè)趺醋龈拍钤O(shè)計(jì)呢,我這里有些大概的思路給大家拋磚引玉下,但不一定完全正確,希望大家可以一起探討。

一. 品牌感

特別是在做一些知名應(yīng)用設(shè)計(jì)時(shí)候,一定不要忘記品牌感,品牌就像內(nèi)衣,看不見但是很重要,我們做任何設(shè)計(jì)一定是要在品牌定位的基礎(chǔ)上去改進(jìn)的。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

Chrome瀏覽器黑色版本概念設(shè)計(jì),我們看得出還是谷歌的品牌感。布局上,操作形式上都很符合谷歌的調(diào)性,但是視覺設(shè)計(jì)師設(shè)計(jì)又是解決問題的,從布局配色上進(jìn)行了調(diào)整。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

Google Bank來(lái)自內(nèi)部的概念設(shè)計(jì),不知道最終上線是什么樣,但是從概念稿我們不難看出,設(shè)計(jì)師是在品牌大的框架,大的設(shè)計(jì)限制下做的改變,整個(gè)APP的骨架、柵格、色彩、插畫風(fēng)格都是在已有的設(shè)計(jì)體系下去做的優(yōu)化和調(diào)整。

二. 確定問題并解決問題

選擇一些你比較喜歡的主題去設(shè)計(jì),最好是經(jīng)常用到的APP,比如旅行、美食、音樂、電影、體育的等等。主題確定后,再進(jìn)一步的探索這些設(shè)計(jì)使用場(chǎng)景,比如重新設(shè)計(jì)Instagram,哪些功能用得不爽,以解決問題的思路去設(shè)計(jì)。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

1. 找出問題確定設(shè)計(jì)目標(biāo)

設(shè)計(jì)師Kim在重新設(shè)計(jì)時(shí)就已經(jīng)明確設(shè)計(jì)目標(biāo):

  • 在發(fā)現(xiàn)頁(yè)面,提供更加有吸引力的無(wú)縫體驗(yàn)。
  • 設(shè)計(jì)更加人性化的界面。
  • 情感化設(shè)計(jì)。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

2. 挖掘設(shè)計(jì)線索

Kim在設(shè)計(jì)的過程中與40多個(gè)用戶進(jìn)行了訪談,通過訪談去挖掘用戶的體驗(yàn)痛點(diǎn),并去定義一些問題,得到一些大概的方向和體驗(yàn)?zāi)繕?biāo)的點(diǎn)。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

3. 設(shè)計(jì)方案設(shè)計(jì)

整個(gè)設(shè)計(jì)方案和其他概念設(shè)計(jì)不一樣,他是以解決問題為目的去做,每一個(gè)設(shè)計(jì)都是去解決現(xiàn)在線上已有的問題。這個(gè)點(diǎn)很重要,我們?cè)诠ぷ髦胁灰彩侨绱嗣矗刻斓脑O(shè)計(jì)是解決產(chǎn)品問題。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

可以看出這個(gè)設(shè)計(jì)中在做概念設(shè)計(jì)的時(shí)候,并不像其他視覺設(shè)計(jì)師,只考慮視覺展現(xiàn)上的表達(dá),而更多的是從挖掘問題本身,通過去發(fā)現(xiàn)問題,解決問題思路入手,同時(shí)設(shè)計(jì)方案也保持了ins原品牌的感覺在里面,是一個(gè)很優(yōu)秀的概念設(shè)計(jì)思路。

4. 挖掘產(chǎn)品體驗(yàn)問題進(jìn)行系統(tǒng)解決方案

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

另外一個(gè)案例是美國(guó)設(shè)計(jì)師Jason重新設(shè)計(jì)的Apple Music,同樣也是類似解決問題的思路。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

蘋果音樂改版前,問題在于導(dǎo)航有很大的優(yōu)化空間,界面比較混亂,設(shè)計(jì)細(xì)節(jié)缺失與蘋果強(qiáng)調(diào)的優(yōu)雅效果相差甚遠(yuǎn),于是他決定改版。

定設(shè)計(jì)目標(biāo)策略

他重點(diǎn)從三個(gè)緯度進(jìn)行改版:

  • 品牌感
  • 界面優(yōu)化
  • 優(yōu)化發(fā)現(xiàn)音樂這個(gè)頁(yè)面

設(shè)計(jì)方案

他對(duì)蘋果封面圖進(jìn)行了統(tǒng)一優(yōu)化,學(xué)習(xí)了Spotify的處理形式。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

△ Spotify音樂封面,品牌感很強(qiáng)。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

△ 蘋果的音樂封面,看得出很混亂沒有規(guī)范。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

△ Jason優(yōu)化后,很明顯看出對(duì)封面進(jìn)行類型定義,從文案位置版式上進(jìn)行了統(tǒng)一協(xié)調(diào)一致。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

△ 篇幅有限就不多列舉,我們可以從以上2位設(shè)計(jì)師的設(shè)計(jì)思路中明顯看出:要從品牌視角,從解決問題為主去做概念方案。

三. 尋找設(shè)計(jì)靈感

前面有強(qiáng)調(diào)設(shè)計(jì)時(shí)候注意品牌感,同時(shí)我們要去找到已有界面一些體驗(yàn)問題,那么找到了問題,如何去解決,這里很重要一點(diǎn)就是尋找設(shè)計(jì)靈感。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

APPLE MUSIC 的設(shè)計(jì)師很快從另外一個(gè)音樂軟件里面找到設(shè)計(jì)靈感,那么我們也同樣,需要去挖掘靈感、線索,我經(jīng)常會(huì)用到Dribbble、Pinterest、Behance、Uplabs、Pttrn網(wǎng)站,比如我要做一個(gè)文字排版優(yōu)化的解決方案,我會(huì)去搜索很多新聞相關(guān)應(yīng)用的排版設(shè)計(jì),尋找文字排版領(lǐng)域設(shè)計(jì)做得最好的來(lái)借鑒。

如果我是需要去優(yōu)化卡片設(shè)計(jì),我可能會(huì)從Facebook上去看他們卡片如何設(shè)計(jì)的,總之我們需要去找一些優(yōu)秀設(shè)計(jì)作為設(shè)計(jì)線索,但是不要找太多參考,會(huì)讓你困擾。

這個(gè)復(fù)盤項(xiàng)目的背后設(shè)計(jì)思路:《我重新設(shè)計(jì)了Apple Music,收獲5K贊!》

編者按:很多設(shè)計(jì)師會(huì)看會(huì)收藏許多優(yōu)秀的作品,但是做項(xiàng)目的時(shí)候卻沒辦法用上,怎么辦?這篇好文教大家如何在工作中復(fù)用自己找到的好圖,以及平時(shí)要怎么去做,即所謂的“如何在工作中找到設(shè)計(jì)靈感”→《如何獲取設(shè)計(jì)靈感?你沒理解它真正的含義!》

總結(jié)

如果你想放一些概念設(shè)計(jì)方案到作品集里面,那么請(qǐng)不要為了追求視覺效果而去做設(shè)計(jì),我們需要真正的去做一些體驗(yàn)改變的事情,當(dāng)在做改版設(shè)計(jì)時(shí)不防多些思考:

  • 品牌感的傳遞。
  • 發(fā)現(xiàn)問題并解決問題。
  • 嘗試改版使用體驗(yàn),而不僅僅是UI。
  • 有系統(tǒng)的設(shè)計(jì)思考過程。

歡迎關(guān)注作者的微信公眾號(hào):我們的設(shè)計(jì)日記,每周分享最新設(shè)計(jì)趨勢(shì)和設(shè)計(jì)經(jīng)驗(yàn),科學(xué)設(shè)計(jì)方法。

剛畢業(yè)沒作品?學(xué)會(huì)做UI 概念設(shè)計(jì)方案,也能打動(dòng)面試官!

「新人求職必看!如何準(zhǔn)備作品集」

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng) UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章,按照我們的專欄一步步學(xué)習(xí),一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航:國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航,設(shè)計(jì)師必備:http://hao.uisdc.com

收藏 9
點(diǎn)贊

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。