首頁

如何提升ui設(shè)計能力

資深UI設(shè)計者

作者:大啵少女
鏈接:https://www.zhihu.com/question/454091157/answer/1850120473
來源:知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

一、了解自己

1.我有什么優(yōu)勢:第一步一定是了解自己的優(yōu)勢,哪怕是一點技能或見識,要把優(yōu)勢變成更優(yōu)勢,一定要突出自己的優(yōu)勢,掩蓋劣勢。

2.我想要什么:這就是目標(biāo),例如3年內(nèi)我想成為專家,要升到P8,又或者3年內(nèi)我要成為管理者。把這些都一一記錄下來,逐一去做分析怎樣才可以達(dá)到目的。

3.我要怎么做:接下來就是要規(guī)劃自己。短可以計劃三五天,長則可以一兩年,把自己的計劃寫下來。然后按著 STAR 原則:Situation(情景),Task(任務(wù)),Action(行動),Result (結(jié)果)去執(zhí)行。

二、了解行業(yè)趨勢同樣是設(shè)計師,一個在短視頻行業(yè),一個在傳統(tǒng)行業(yè),最簡單的來說,收入差距就可想而知了。比如現(xiàn)在很多大廠已經(jīng)沒有純 UI 崗位了,你這個時候還義無反顧的深耕純 UI,那最后就會面臨失業(yè)的風(fēng)險。

三、打造個人 IP設(shè)計師都是獨一無二的,如果要問打造個人 IP 最佳開始時間,就是現(xiàn)在。

這個是很重要的,尤其是在高級崗位以后,你要在細(xì)分行業(yè)有一定的影響力,他是可以給你簡歷加很多分的。打造 IP 的行動項有很多,比如定期各大設(shè)計網(wǎng)站發(fā)表作品集、在信息類網(wǎng)站上發(fā)表自己的文章等等… 當(dāng)然了,這個是需要長期堅持的才有明顯收益的。你可以給自己制定一些獎勵計劃,激勵自己堅持輸出?;蛘哒乙恍┲就篮系脑O(shè)計師一起互相督促,去找那些比你厲害的人,慢慢超過他們。 行業(yè)內(nèi)深耕,不要蜻蜓點水:有的設(shè)計師覺得設(shè)計不分行業(yè),只要另外一個行業(yè)給的薪資足夠,就義無反顧的換行業(yè)。這樣長期下來,你在每個行業(yè)都只是蜻蜓點水,做不到足夠深入的了解行業(yè)相關(guān)知識,很難在一個高級職位上立住腳。只有充分具備了某個行業(yè)相關(guān)的知識背景,才能勝任更高級的職位,而不只是做一個只懂表面的設(shè)計師。四、提升自己

  1. 交互能力:不必多說,交互能力的重要性大家也都知道了。隨著行業(yè)的發(fā)展,現(xiàn)在很多公司的 UI 崗已經(jīng)不是單純的 UI 崗了,更多的是一種多元化的職位,交互能力是必不可缺的一種能力。

  2. 眼界:對于設(shè)計師來說,眼界決定高度,眼界低是做不出好設(shè)計的。想要提升設(shè)計能力,首先提高自己的眼界。多看、多看、多看……

  3. 審美能力:這個也是設(shè)計師的基本功,你要能看出別人作品的好與壞。練習(xí)方法就是多看多思考,多去參加一些設(shè)計展。

  4. 視覺表現(xiàn)力:創(chuàng)意、軟件技能:作為設(shè)計師,視覺表現(xiàn)力是最基礎(chǔ)的,也是最重要的。這里我把它分為兩個方面:創(chuàng)意和軟件技能。創(chuàng)意:設(shè)計重在想法和創(chuàng)意,且要不斷的通過學(xué)習(xí)去給自己的大腦輸入靈感。讓大腦一直處于活躍狀態(tài);軟件技能:一切的設(shè)計實現(xiàn)都要由軟件來實現(xiàn)。在自己時間允許的情況下,多學(xué)習(xí)一些軟件技能,現(xiàn)在軟件更新非常之快,前些年還用 PS / AI 來做界面呢,現(xiàn)在你還會用嗎?

  5. 產(chǎn)品把控力產(chǎn)品:一是對設(shè)計方案的設(shè)計把控,保證設(shè)計效果做到最好;二是對設(shè)計進(jìn)度的把控,按時把控設(shè)計方案的上線;三是對實際開發(fā)結(jié)果的把控,保證上線后的設(shè)計還原度最大化。

  6. 溝通演講能力:設(shè)計師有一個好的溝通能力可以讓團(tuán)隊更好的運作,提升工作效率。好的演講能力體現(xiàn)在設(shè)計評審的討論時,能夠更好的 hold 場面,讓整個溝通更加順暢。

  7. 管理能力:對內(nèi)-設(shè)計團(tuán)隊的管理、人員的分工、任務(wù)分配、發(fā)展部門內(nèi)學(xué)習(xí)氛圍、與團(tuán)隊人員溝通等等;對外-與其他部門的溝通協(xié)作、工作銜接,保證整個業(yè)務(wù)線的工作有條不紊的進(jìn)行。

  8. 調(diào)研能力:調(diào)研能力可以考驗人的信息搜索、整理、分析的能力。他可以在設(shè)計前期找到設(shè)計的切入點,在設(shè)計中期提供有力的理論觀點。同時調(diào)研結(jié)果也可以作為評判自己產(chǎn)品評分的一個標(biāo)準(zhǔn)。如果沒做過設(shè)計調(diào)研的話,前期可以去看一些大神做的完整的調(diào)研報告,分析他們的邏輯、寫作手法等,需要多看多分析。

  9. 規(guī)范意識:近些年大家對規(guī)范意識都有了明顯的提升,規(guī)范可以提升工作效率以及降低溝通成本,同時也可以避免一些低級錯誤。如果你在團(tuán)隊中沒有團(tuán)隊意識的話,工作就會很吃力。

  10. 學(xué)習(xí)能力:畢業(yè)后,提升能力有兩個方面:從項目中學(xué)習(xí)和自學(xué)。從項目中學(xué)習(xí):每次做完項目及時做設(shè)計復(fù)盤,把從項目中學(xué)到的知識再熟悉一遍,做好知識沉淀;走過的坑再溫習(xí)一遍,避免之后再犯;自學(xué):這部分做的好與不好,幾年后的差距是非常之大的,每個人的工作時間基本是差不多的,區(qū)別大的就是業(yè)余時間。最怕的就是比你厲害的人比你還努力。

  11. 知識沉淀:俗話說好記性不如爛筆頭。你有沒有看到一個好的東西趕緊保存下來的習(xí)慣,但是從來也不看?這是大部分人的通病,覺得我保存了就是我學(xué)到了。知識沉淀指的是通過自己的整理,不斷對項目進(jìn)行復(fù)盤,把自己真正需要的東西保存下來,用的時候可以即時拿出來查閱。找到自己的職業(yè)定位,想清楚自己要往哪個方向發(fā)展,不斷的學(xué)習(xí)技能點就對了,加油吧,設(shè)計人!

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

讓用戶輸密碼的正確姿勢!簡化密碼設(shè)計的三個小秘籍

資深UI設(shè)計者

讓用戶輸密碼的正確姿勢!簡化密碼設(shè)計的三個小秘籍

2023-06-28 15:50北京北京蘭亭妙微科技有限公司官方帳號

隨著互聯(lián)網(wǎng)的普及和數(shù)字化時代的來臨,密碼的重要性不言而喻。然而,很多人在設(shè)計密碼時往往面臨記憶難題和安全性問題。為了幫助用戶設(shè)計更簡化且安全的密碼,本文將介紹三個小秘籍。

一、使用密碼管理工具

密碼管理工具是一種方便且安全的方式來管理和存儲密碼。它們通常提供加密的存儲空間,可以儲存各種賬戶的用戶名和密碼。用戶只需記住一個主密碼,就能夠訪問和管理所有其他密碼。這樣,用戶可以選擇更復(fù)雜、更安全的密碼,而不必?fù)?dān)心記憶的問題。此外,密碼管理工具通常還提供自動生成密碼的功能,確保密碼的隨機(jī)性和安全性。一些常見的密碼管理工具包括LastPass、1Password和Keepass等。

二、使用短語或句子作為密碼

傳統(tǒng)的密碼通常由字符、數(shù)字和特殊符號組成,很難記憶且容易被猜測。相比之下,使用短語或句子作為密碼可以更容易記住且更安全。選擇一個有意義的短語或句子,并將其轉(zhuǎn)化為密碼。例如,"ILoveToTravelTheWorld!",這個短語可以轉(zhuǎn)化為密碼"Ilv2ttw!"。這樣的密碼不僅容易記憶,而且由于包含了大小寫字母、數(shù)字和特殊符號,具備了一定的安全性。

三、使用多因素身份驗證

多因素身份驗證是一種提高賬戶安全性的重要方式。除了使用密碼外,多因素身份驗證要求用戶提供第二個驗證因素,如手機(jī)驗證碼、指紋識別或硬件安全密鑰等。這樣,即使密碼被泄露,黑客也無法輕易訪問賬戶。許多在線服務(wù)提供了多因素身份驗證選項,用戶應(yīng)該積極開啟并使用這個功能。

綜上所述,設(shè)計簡化且安全的密碼并不是一件困難的事情。通過使用密碼管理工具、使用短語或句子作為密碼以及使用多因素身份驗證,用戶可以更好地保護(hù)自己的賬戶安全。重要的是,用戶應(yīng)該時刻保持警惕,定期更換密碼,并避免在多個賬戶中使用相同的密碼,以確保個人信息的安全。

今日分享這篇文章是藍(lán)藍(lán)設(shè)計的原創(chuàng)文章,未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報下信息,藍(lán)小助會請您入群。同時添加藍(lán)小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

UI設(shè)計的20個原則,明確你的設(shè)計思路

資深UI設(shè)計者

UI設(shè)計的概念側(cè)重在“交互”設(shè)計。優(yōu)秀的UI設(shè)計界面,不光是各種元素設(shè)計技巧的展現(xiàn),更重要的是能表現(xiàn)出用戶角度的完美“體驗感”。

1、明確你的用戶群

首先要明確一個方向:誰是你的用戶群?不同階層、不同年齡的用戶偏重的主題設(shè)定和設(shè)計元素都不相同,所以UI設(shè)計必須是有針對性地設(shè)計。

2、界面要清晰

清晰度是界面設(shè)計中,第一步也是最重要的工作。要想你設(shè)計的界面有效并被人喜歡,首先必須讓用戶能夠識別出它,讓用戶知道為什么會使用它。當(dāng)用戶使用時,要能夠預(yù)料到發(fā)生什么,并成功的與之交互,只有清晰的界面能夠吸引用戶不斷地重復(fù)使用。

3、交互性

界面的存在,促進(jìn)了用戶和我們的世界之間的互動。優(yōu)秀的界面不但能夠讓我們做事有效率,還能夠激發(fā)、喚起和加強(qiáng)我們與這個世界的聯(lián)系。

4、保持用戶的注意力

在進(jìn)行界面設(shè)計的時候,能夠吸引用戶的注意力是很關(guān)鍵的,所以千萬不要將你應(yīng)用的周圍設(shè)計得亂七八糟分散人的注意力,謹(jǐn)記屏幕整潔能夠吸引注意力的重要性。如果你非要顯示廣告,那么請在用戶閱讀完畢之后再顯示。尊重用戶的注意力,不僅讓用戶更快樂,而且你的廣告效果也會更佳。因此要想設(shè)計好的界面,保持用戶的注意力是先決條件。

5、讓用戶掌控界面

人都喜歡對事物完全掌控,而不考慮用戶感受的軟件往往不會給客戶掌控的感覺,迫使用戶不得不進(jìn)入計劃外的交互,這會讓用戶很不舒服。保證界面處在用戶的掌控之中,讓用戶自己決定系統(tǒng)狀態(tài),稍加引導(dǎo),這樣會更容易達(dá)成目標(biāo)。

6、每個屏幕需要一個主題

我們設(shè)計的每一個畫面都應(yīng)該有單一的主題,這樣不僅能夠讓用戶使用到它真正的價值,也使得上手容易,使用起來也更方便,在必要的時候更容易進(jìn)行修改。如果一個屏幕支持兩個或兩個以上的主題,整個界面看起來會混亂不堪。正如文章應(yīng)該有一個單一的主題以及強(qiáng)有力的論點,我們的界面設(shè)計也應(yīng)該如此,這也是界面存在的理由。

7、區(qū)分動作主次

每個屏幕包含一個主要動作的同時,可以有多個次要動作,但盡量不要讓它們喧賓奪主!文章的存在是為了讓人們?nèi)ラ喿x它,所以在設(shè)計界面的時候,盡量減弱次要動作的視覺沖擊力,或者在主要動作完成之后再顯示出來。

8、自然過渡

界面的交互都是環(huán)環(huán)相扣的,所以設(shè)計時,要深思熟慮地考慮到交互的下一步??紤]到下一步的交互是怎樣的,并且通過設(shè)計將其實現(xiàn)。這就好比我們的日常談話,要為深入交談提供話由。當(dāng)用戶已經(jīng)完成該做的步驟,不要讓他們不知所措,給他們自然而然繼續(xù)下去的方法,以達(dá)成目標(biāo)。

9、符合用戶期望

人總是對符合期望的行為最感舒適,這也是與人打交道的設(shè)計應(yīng)該做到的。在實踐中,這意味著用戶只要看一眼就可以知道接下來將會有什么的動作發(fā)生,如果它看上去像個按鈕,那么它就應(yīng)該具備按鈕的功能。設(shè)計師不應(yīng)該在基本的交互問題上耍小聰明,要在更高層次的問題上發(fā)揮創(chuàng)造力。

10、強(qiáng)烈的視覺層次感

如果要讓屏幕的視覺元素具有清晰的瀏覽次序,那么應(yīng)該通過強(qiáng)烈的視覺層次感來實現(xiàn)。也就是說,如果用戶每次都按照相同的順序瀏覽同樣的東西,視覺層次感不明顯的話,用戶不知道哪里才是目光應(yīng)當(dāng)停留的重點,最終只會讓用戶感到一團(tuán)糟。在不斷變更設(shè)計的情況下,很難保持明確的層次關(guān)系,因為所有的元素層次關(guān)系都是相對的:如果所有的元素都突出顯示,最后就相當(dāng)于沒有重點可言。如果要添加一個需要特別突出的元素,為了再次實現(xiàn)明確的視覺層級,設(shè)計師可能需要重新考慮每一個元素的視覺重量。雖然多數(shù)人不會察覺到視覺層次,但這是增強(qiáng)設(shè)計的最簡單的方法。

11、減輕用戶的認(rèn)知壓力

恰當(dāng)?shù)靥幚硪曈X元素能夠化繁為簡,幫助他人更加快速簡單地理解你的表達(dá)。用方位和方向上的組織可以自然地表現(xiàn)元素間的關(guān)系。恰如其分地組織內(nèi)容可以減輕用戶的認(rèn)知負(fù)擔(dān),他們不必再琢磨元素間的關(guān)系,因為你已經(jīng)表現(xiàn)出來了。不要迫使用戶做出分辨,而是設(shè)計者用組織表現(xiàn)出來。

12、色彩不能決定一切

物體的色彩會隨光線改變而改變。艷陽高照與夕陽西沉?xí)r,我們看到的景物會有很大反差。換句話說,色彩很容易被環(huán)境改變,因此,設(shè)計的時候不要將色彩視為決定性因素。色彩可以醒目,作為引導(dǎo),但不應(yīng)該是做區(qū)別的唯一元素。在長篇閱讀或者長時間面對電腦屏幕的情況下,除了要強(qiáng)調(diào)的內(nèi)容,應(yīng)采用相對暗淡或柔和的背景色。當(dāng)然,視讀者而定,也可采用明亮的背景色。

13、恰當(dāng)?shù)恼宫F(xiàn)

每個屏幕只展現(xiàn)必需的內(nèi)容。如果用戶需要作出決定,則展現(xiàn)足夠的信息供其選擇,他們會到在下一屏找到所需細(xì)節(jié)。避免過度闡釋或把所有一次展現(xiàn),如果可能,將選擇放在下一屏以有步驟地展示信息。這會使你的界面交互更加清晰。

14、“幫助”選項

在理想的用戶界面,“幫助”選項是不必要出現(xiàn)的,因為用戶界面能夠有效地指引用戶學(xué)習(xí)。類似“下一步”實際上就是在上下文情境中內(nèi)嵌的“幫助”,并且只在用戶需要的時候出現(xiàn)在適當(dāng)?shù)奈恢茫渌麜r候都是隱藏的。設(shè)計者的任務(wù)是應(yīng)該確保用戶知道如何使用你提供的界面,讓用戶在界面中得到指導(dǎo)并學(xué)習(xí)。

15、引導(dǎo)狀態(tài)

用戶對一個界面的首次體驗是非常重要的,而這常常被設(shè)計師忽略。為了更好的幫助用戶快速適應(yīng)我們的設(shè)計,設(shè)計應(yīng)該處于零狀態(tài),也就是什么都沒有發(fā)生的狀態(tài)。但這個狀態(tài)不是一塊空白的畫布,它應(yīng)該能夠為用戶提供方向和指導(dǎo),以此來幫助用戶快速適應(yīng)設(shè)計。在初始狀態(tài)下的互動過程中會存在一些摩擦,一旦用戶了解了各種規(guī)則,那將會有很高的機(jī)會獲得成功。

16、解決看得到的問題

人們總是尋求各種方案去解決已經(jīng)存在的問題,而不是潛在的或者未來的問題。所以,不要為假設(shè)的問題設(shè)計界面,我們應(yīng)該觀察現(xiàn)有的行為和設(shè)計,解決現(xiàn)存的問題。這確實不是件能夠讓人興奮的事情,但卻是最有價值的事情,因為一旦你的用戶界面愈加完善,會有更多的用戶愿意使用你的界面。

17、多涉獵設(shè)計之外的知識

視覺、平面設(shè)計、排版、文案、信息結(jié)構(gòu)以及可視化,所有的這些知識領(lǐng)域都應(yīng)該是界面設(shè)計應(yīng)該包含的內(nèi)容,設(shè)計師對這些知識都應(yīng)該有所涉獵或者比較專長,要從中獲取許多值得學(xué)習(xí)的東西,以此來提高你的工作能力。

18、實用性

在設(shè)計領(lǐng)域,界面設(shè)計成功的要素就是有用戶使用它。雖然精美但用戶不會選擇使用的設(shè)計作品,也就是失敗的作品。因此,界面設(shè)計不僅僅是設(shè)計一個使用環(huán)境,還需要是創(chuàng)造一個值得使用的藝術(shù)品,它僅僅能夠滿足其設(shè)計者的虛榮心是不夠的,首先它必須要實用!

19、檢查錯誤

要盡可能檢查和清除程序中的錯誤和BUG,即便精心地設(shè)計了彈窗來做說明。為了更好的用戶體驗,不要出現(xiàn)讓用戶驚訝的結(jié)果。Beta測試是消減錯誤的最好方法。

20、簡約設(shè)計

簡約設(shè)計不僅僅是一種流行趨勢,從用戶體驗上看,簡約的界面可以去掉很多無關(guān)的干擾信息,使UI更具易用性。好的UI設(shè)計應(yīng)該具備強(qiáng)大的功能,但是畫面要簡約,擁擠的界面,不論功能多么強(qiáng)大,都會給用戶帶來不適感。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

全球最大職業(yè)社交網(wǎng)站LINKEDIN!用戶體驗主管訪談

資深UI設(shè)計者

全球最大職業(yè)社交網(wǎng)站LINKEDIN!用戶體驗主管訪談

2023-06-21 09:24北京北京蘭亭妙微科技有限公司官方帳號

作為全球最大的職業(yè)社交網(wǎng)站,LinkedIn一直致力于提供卓越的用戶體驗。其成功的關(guān)鍵在于與用戶建立了良好的互動關(guān)系,并根據(jù)用戶需求和反饋不斷改進(jìn)產(chǎn)品和服務(wù)。在這篇訪談中,我們邀請了LinkedIn的用戶體驗主管回答有關(guān)如何順應(yīng)當(dāng)前市場趨勢、創(chuàng)新設(shè)計、優(yōu)化用戶體驗等問題的詳細(xì)解答。

問:感覺到社交媒體市場上存在哪些新的趨勢?

答:在社交媒體市場中,我們發(fā)現(xiàn)一個令人興奮的趨勢是,更多的人開始重視個人品牌并積極參與社交媒體平臺來建立自己的專業(yè)形象。這也是LinkedIn的一大核心功能,即幫助人們建立專業(yè)形象、擴(kuò)展人脈和探索更豐富的職業(yè)機(jī)會。此外,移動設(shè)備的使用也在持續(xù)增長,因此我們需要將移動設(shè)備作為設(shè)計和開發(fā)的首要考慮因素。

問:如何創(chuàng)新設(shè)計來滿足新的市場需求?

答:創(chuàng)新設(shè)計是實現(xiàn)優(yōu)良用戶體驗的關(guān)鍵所在。在設(shè)計方面,我們需要堅持簡潔、易用和可靠的原則,并與用戶進(jìn)行廣泛的交流和反饋。我們在設(shè)計新功能和產(chǎn)品時,通常會通過一系列的測試、原型驗證和問卷調(diào)查等來驗證人們對其使用情況的反饋,進(jìn)而優(yōu)化設(shè)計。

另外,在社交媒體市場中,內(nèi)容的質(zhì)量也十分重要。我們需要提供優(yōu)質(zhì)內(nèi)容和有價值的信息,以吸引更多的用戶。此外,開放平臺和API的應(yīng)用也能夠為設(shè)計師和開發(fā)人員提供更多的機(jī)會和工具,從而創(chuàng)新地滿足用戶不斷變化的需求。

問:如何保持和改進(jìn)LinkedIn的優(yōu)秀用戶體驗?

答:為了保持和改進(jìn)LinkedIn的優(yōu)秀用戶體驗,我們需要不斷地傾聽用戶的意見和建議。例如,我們定期進(jìn)行用戶調(diào)查和反饋收集,并根據(jù)用戶反饋不斷優(yōu)化和改進(jìn)我們的產(chǎn)品和服務(wù)。此外,我們還有專門的用戶體驗團(tuán)隊來負(fù)責(zé)設(shè)計和評估產(chǎn)品的用戶界面和用戶體驗。我們堅持 "用戶優(yōu)先" 的原則,始終將用戶需求置于設(shè)計和開發(fā)的核心位置。

我們還注重用戶數(shù)據(jù)的分析和利用。通過分析和挖掘用戶行為數(shù)據(jù),我們可以更好地理解用戶的使用情況和需求,進(jìn)而為設(shè)計和開發(fā)提供指導(dǎo)和方向。此外,我們還將不斷探索新的技術(shù)和趨勢,以保持領(lǐng)先地位。

問:如何應(yīng)對LinkedIn在全球范圍內(nèi)的不同文化和語言差異?

答:LinkedIn在全球擁有超過7000萬的用戶,為了滿足用戶的不同需求,我們需要考慮和應(yīng)對各種不同的文化和語言差異。為此,我們采用本地化策略,為不同語言和文化背景的用戶提供專門定制的界面和服務(wù)。例如,在中國市場,我們?yōu)橛脩籼峁┝吮镜鼗姹镜腖inkedIn,包括漢化界面、本土化職業(yè)機(jī)會和相關(guān)文化資訊等。

另外,我們還注重跨文化交流和互動,通過協(xié)同團(tuán)隊和全球社區(qū)的合作和溝通,同步了解全球各地用戶的需求和意見,并根據(jù)其反饋進(jìn)行相應(yīng)調(diào)整和優(yōu)化。

總之,LinkedIn將始終堅持用戶優(yōu)先、創(chuàng)新設(shè)計和不斷改進(jìn)的原則,為用戶提供更優(yōu)秀的職業(yè)社交體驗,幫助他們更好地建立和管理自己的專業(yè)形象,并找到更好的職業(yè)機(jī)會。

今日分享這篇文章是藍(lán)藍(lán)設(shè)計的原創(chuàng)文章,未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報下信息,藍(lán)小助會請您入群。同時添加藍(lán)小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

技術(shù)與人性的碰撞!給設(shè)計師的用戶體驗設(shè)計發(fā)展簡史

資深UI設(shè)計者

技術(shù)與人性的碰撞!給設(shè)計師的用戶體驗設(shè)計發(fā)展簡史

2023-06-21 09:19北京北京蘭亭妙微科技有限公司官方帳號

背景介紹

在界面設(shè)計中,字體的選擇和運用是非常重要的一環(huán)。合理的字體搭配可以讓界面更加美觀、易讀、易于理解,從而提高用戶的使用體驗。而不合適的字體搭配則可能造成視覺上的疲勞和不適。因此,在界面設(shè)計中,選擇合適的字體并進(jìn)行規(guī)范化是非常必要的。

常用字體

2.1 英文字體

在英文界面設(shè)計中,常見的字體有Arial、Times New Roman、Verdana、Calibri等。其中,Arial字體是Microsoft Office軟件的默認(rèn)字體之一,它具有清晰明了、易讀易懂的特點,適用于各種場合。而Times New Roman字體則常用于正式的文本排版中,例如學(xué)術(shù)論文、報告等。Verdana字體相比起Arial更加圓潤,具有更好的可讀性和視覺效果。Calibri則是一種比較新的字體,它具有現(xiàn)代感,同時也非常適合界面設(shè)計。

2.2 中文字體

在中文界面設(shè)計中,常見的字體有宋體、黑體、微軟雅黑、仿宋等。其中,宋體是Windows操作系統(tǒng)的默認(rèn)字體之一,具有比較好的可讀性和兼容性。黑體相比較宋體更加粗壯,適用于強(qiáng)調(diào)和突出展示的場合。微軟雅黑則是微軟公司開發(fā)的一款中文設(shè)計字體,它簡潔清新、易讀易懂,非常適合作為界面設(shè)計的基礎(chǔ)字體。仿宋則具有較高的書法美感,適合于書信、印章等正式場合。

字體規(guī)范化

為了使界面設(shè)計更加一致和規(guī)范,我們需要對字體進(jìn)行規(guī)范化。具體而言,需要從以下幾個方面進(jìn)行規(guī)范化:

3.1 字號

字號是指字體的大小,通常使用pt(磅)作為單位。在界面設(shè)計中,需要根據(jù)不同元素的大小進(jìn)行選擇和調(diào)整,以達(dá)到界面整體比例協(xié)調(diào)的效果。一般而言,主標(biāo)題的字號應(yīng)該在36pt-48pt之間,副標(biāo)題的字號應(yīng)該在24pt-30pt之間,正文的字號應(yīng)該在12pt-16pt之間。

3.2 行距

行距是指一行文字與下一行文字之間的距離。一般而言,行距的大小應(yīng)該是字號的1.5倍左右。如果行距太小,會導(dǎo)致文字過于緊密,不利于閱讀;而行距過大,則會造成視覺上的浪費,不利于排版美觀。

3.3 字體顏色

字體顏色需要根據(jù)不同場合、不同元素的特點進(jìn)行選擇。一般而言,主要內(nèi)容(如標(biāo)題、正文等)的字體顏色應(yīng)該是黑色或深灰色,強(qiáng)調(diào)內(nèi)容(如重要提示、鏈接等)的字體顏色可以是藍(lán)色、紅色等。同時,需要注意背景色與字體顏色之間的對比度,以確保字體清晰可讀。

3.4 字間距

字間距是指字體中各個字符之間的間距。一般而言,字間距應(yīng)該適當(dāng)擴(kuò)大,以保證單詞和句子之間的空隙,增加字體的易讀性。但是,字間距過大也會影響排版的美觀性,因此需要根據(jù)實際情況進(jìn)行調(diào)整。

總結(jié)

在界面設(shè)計中,字體的選擇和規(guī)范化是非常重要的一環(huán)。根據(jù)不同的場合和元素特點進(jìn)行合理的字體搭配,并進(jìn)行規(guī)范化,可以提高用戶的使用體驗,讓界面更加美觀、易讀易懂。

今日分享這篇文章是藍(lán)藍(lán)設(shè)計的原創(chuàng)文章,未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報下信息,藍(lán)小助會請您入群。同時添加藍(lán)小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

UI設(shè)計的4個角度14點思考

資深UI設(shè)計者

站在不同的角度思考設(shè)計,發(fā)現(xiàn)設(shè)計的新出路。

UI設(shè)計3天時間完成~

這個界面不難的,按照我的交互稿上個色就好了~

簡單設(shè)計一下,馬上給我~

再調(diào)幾個顏色給我選一下~

模塊先設(shè)計,顏色最后調(diào)一下也很快的~


熟悉吧,以上是作為UI設(shè)計師的你,幾乎每天都能聽到的把。拜托,就算是路邊打印店,讓人家?guī)湍阍O(shè)計個名片,你也會問人家什么時候能做好吧。難不成設(shè)計這么好做?要不你行你上?我做不了~

慢著,我做,我做,誰讓你給我發(fā)錢,給錢就是老大,要做就做吧~

于是出現(xiàn)了以下設(shè)計稿

常說設(shè)計是一個用戶接觸產(chǎn)品的第一道門。從應(yīng)用市場的圖標(biāo)開始到用戶下載打開app的啟動頁,再到用戶進(jìn)入app后看到的首頁。難道設(shè)計師真的不考慮什么嗎?真的按照產(chǎn)品或交互設(shè)計稿做嗎。從圖標(biāo)在應(yīng)用市場的吸引力,到用戶使用app后的留存率,請問哪一個不是和UI設(shè)計師有關(guān)系!業(yè)績好,業(yè)務(wù)好是產(chǎn)品的營銷和自然增長率。業(yè)務(wù)差就是設(shè)計不吸引人沒有感染力,嗯哼???

在此呼吁廣大項目管理者,請給我們的設(shè)計師一些思考的時間,一些打磨設(shè)計的時間。

好了,廢話不多說,進(jìn)入正題。假設(shè)有一天,公司給了你足夠的時間設(shè)計。你該如何思考?你要怎么不受約束的將自己的產(chǎn)品觀融入你的設(shè)計中?從現(xiàn)在開始,即使產(chǎn)品給你的設(shè)計時間很短,你也要學(xué)著思考,學(xué)著加入自己的思維,做一個有思想的設(shè)計師。做到這一點很難,但是你必須學(xué)著這樣做,跟我沒關(guān)系,但對你有益。

1.學(xué)著像產(chǎn)品經(jīng)理一樣思考(THINKING LIKE PM)


產(chǎn)品經(jīng)理是怎么思考的。產(chǎn)品經(jīng)理是產(chǎn)品的CEO,手握著產(chǎn)品的生殺大權(quán)??紤]的會更偏像于產(chǎn)品的核心觀。幫助用戶解決什么痛點,通過什么方式解決這個痛點,怎么為公司提高贏利、如何提高轉(zhuǎn)化、如何提升留存…當(dāng)然你并不需要完全知道所有的東西,因為你有你自己的專長(UI設(shè)計)。


但是,必須留意的幾點就是:(1)用戶群體(2)相關(guān)競品(3)主要商業(yè)模式


(1)對于用戶群體的了解,你能夠通過這部分用戶群體找到相關(guān)的用戶畫像。這一點很重要(因為從你入職為UI設(shè)計師的那天開始,你的設(shè)計是幫助公司服務(wù)于用戶的,并不是為了表達(dá)你崇高的藝術(shù)涵養(yǎng)的)。通過用戶畫像,你能找到這部分人的主要特征,這將會有助于你選擇設(shè)計中使用的顏色、字體大小。

     打個比方來說,總不能為服務(wù)于紅綠色盲人群設(shè)計的產(chǎn)品,UI做出了綠色界面+紅色按鈕吧?你以為你通過顏色對比突出了按鈕,實際…對吧?你可以用顏色來讓界面產(chǎn)生差異,單不能僅依賴于顏色提升設(shè)計效果,因為并不是每個人都能精確的分辨出各種顏色。

(2)產(chǎn)品的競品,對于相關(guān)競品的研究,也是目前UI設(shè)計師設(shè)計過程中常用的一種方法。好處呢當(dāng)然顯而易見,競品的顏色用取,設(shè)計風(fēng)格…這些都是已經(jīng)線上經(jīng)過驗證了的。有很多設(shè)計師是在看完競品后恍然大悟,顏色該用啥,按鈕用啥色。但這是萬萬不可取的。這會導(dǎo)致你們的產(chǎn)品沒有任何競爭力,上線比人家晚,看著有和人家差不多。怎么打差異化的戰(zhàn)?取其優(yōu),去其差。思考人家設(shè)計師為什么這么做,他們是怎么想的,如果我設(shè)計會設(shè)計成什么樣?

(3)你必須要了解你的商業(yè)模式。作為設(shè)計師有權(quán)知道公司的基本商業(yè)模式,這也是考慮在整體設(shè)計里程里面。霧里看花管中窺豹,你永遠(yuǎn)看不到你所設(shè)計的產(chǎn)品本質(zhì)。再打個比方:假設(shè)你的產(chǎn)品是通過用戶購買相關(guān)服務(wù)進(jìn)行盈利的,那么設(shè)計前你得思考整個產(chǎn)品其實是需要安全、信任、服務(wù)作為設(shè)計主旨,其中突出“服務(wù)”作為亮點,需要傳遞給用戶一種安全可靠的情感,最終引導(dǎo)消費者完成支付購買。


2.學(xué)著像交互設(shè)計師一樣思考(THINKING LIKE UE)


     用戶體驗、使用場景、信息優(yōu)先級、轉(zhuǎn)場、使用習(xí)慣…對于交互設(shè)計師來說這是多么熟悉的名詞。確實,交互設(shè)計師考慮更多的是怎么讓用戶在app上操作的爽了,最符合用戶的操作習(xí)慣,將產(chǎn)品經(jīng)理傳達(dá)下來的商業(yè)模式/邏輯變?yōu)榱鞒痰男问揭龑?dǎo)用戶進(jìn)行使用。通過數(shù)據(jù)的分析,不斷優(yōu)化上線后產(chǎn)品的相關(guān)體驗。

作為設(shè)計師的你,怎么像交互設(shè)計師一樣思考呢?


(1)用戶體驗=顏色是否和諧。顏色的使用,之前已經(jīng)說過了,考慮用戶群體的基礎(chǔ)上,看你顏色的配比是否讓人舒適,是否準(zhǔn)確的傳遞出了產(chǎn)品想給用戶的那種感覺。產(chǎn)品正式設(shè)計前,通常會進(jìn)行所謂的風(fēng)格探索階段。是允許設(shè)計師根據(jù)提供的用戶群體發(fā)揮自己的創(chuàng)意進(jìn)行設(shè)計的。當(dāng)找到那種適合的顏色搭配后,接下去的設(shè)計會顯得游刃有余。但是目前很多公司都是略過探索這一步的。為追求產(chǎn)品的快速上線,基本都是領(lǐng)導(dǎo)找競品給顏色,設(shè)計師根據(jù)這個顏色(衍生色)進(jìn)行設(shè)計。缺乏用色的專業(yè)性。



(2)使用場景=顏色使用是否符合用戶使用產(chǎn)品時的場景。這個就比較好理解了,產(chǎn)品到底是晚上用的還是白天用的,到底是地鐵上用的還是書房里用戶。不同的使用場景在設(shè)計時也應(yīng)該考慮在內(nèi)。例如,晚上使用的產(chǎn)品顏色一定會偏暗一些、白天熱鬧場所使用的產(chǎn)品一定會是偏簡潔、書房使用的產(chǎn)品一定是偏溫和…

(3)信息優(yōu)先級=如何通過設(shè)計的方法(大小、位置、形狀、顏色、動畫)突出產(chǎn)品重點。通過對比、突出等手法,將重要信息直接展示給用戶。做到簡單直接有效。


(4)轉(zhuǎn)場=如何通過動效的方式便于用戶理解邏輯跳轉(zhuǎn)。這一點特別是在相對復(fù)雜的產(chǎn)品的時候較為常用,例如層級相對比較深,則會通過轉(zhuǎn)場的引導(dǎo)告知用戶從哪來到哪兒去。引領(lǐng)用戶使用你的產(chǎn)品,不至于在產(chǎn)品使用過程中迷失。


(5)使用習(xí)慣=相關(guān)設(shè)計規(guī)范。用戶長時間使用完你的產(chǎn)品后,已養(yǎng)成了使用習(xí)慣。知道哪個位置是重要的內(nèi)容。如果用戶已經(jīng)建立了產(chǎn)品工作原理的心理模型,他們可能會有非常強(qiáng)烈的觀點,認(rèn)為某些東西就應(yīng)該在某些特定的位置,通常設(shè)計師可以利用這一特點來引導(dǎo)用戶發(fā)現(xiàn)重要功能。

3.學(xué)著像用戶一樣思考(THINKING LIKE UESR)


(1)用戶在使用產(chǎn)品的時候,最優(yōu)考慮的是,這個產(chǎn)品是不是能幫我解決我的問題(賺錢、記賬、提醒…),產(chǎn)品的核心功能一定是用戶最先考慮的。


(2)你的設(shè)計是不是好看,他會考慮說,這個東西怎么看著這么low,是不是公司不正規(guī)啊?前文也提到了,每個產(chǎn)品都有自己的目標(biāo)人群,那么研究這部分目標(biāo)人群的相關(guān)喜好,通過設(shè)計的方式將其重現(xiàn)給用戶。


(3)這個產(chǎn)品用起來爽不爽,怎么這么卡頓、怎么看起來能點實際不能點、怎么功能這么多都沒用、怎么…

當(dāng)然用戶有千千萬萬,你不可能完全都能像所有用戶那樣思考,滿足大部分用戶就可以了。

4.學(xué)著像你自己一樣思考(THINKING LIKE YOURSELF)


   是否在為產(chǎn)品設(shè)計的過程中,已經(jīng)忘了像自己一樣思考了。滿腦子都是產(chǎn)品經(jīng)理想要什么樣的,用戶想要什么樣的。這也會讓你喪失自己的思考能力。


(1)學(xué)著像自己一樣思考,不是說按照自己的喜好來,而是你在設(shè)計的過程中是否偏離了自己的設(shè)計觀。對于明顯是錯誤的設(shè)計,你選擇接受。


(2)以調(diào)研或用戶研究結(jié)果為準(zhǔn)則,完全喪失你自己對這個產(chǎn)品應(yīng)有的樣子的判斷。做個半理性半感性的設(shè)計師,會讓你的設(shè)計既符合用戶口味,又有自己的韻味。


總結(jié)


記住設(shè)計產(chǎn)品的人是你,對產(chǎn)品美化體驗的是你,如果你的設(shè)計和使用不再適用于用戶,他們可以毫不留情的轉(zhuǎn)向其他產(chǎn)品,而作為設(shè)計師的你不能這么做。用戶不知道你的設(shè)計是怎么來的是怎么想的,但是你了解這一點。用戶不知道你是通過調(diào)研或研究得出他們的相關(guān)喜好最終選擇了這樣的設(shè)計,但是你很清楚。真正受制于產(chǎn)品設(shè)計的人是你,因此要確保它仍是你值得付出,引以為傲的東西。


作者:OTTUI設(shè)計
鏈接:https://www.zcool.com.cn/article/ZNjI3MzQ0.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

UI設(shè)計的幾個原則

資深UI設(shè)計者

英文換成中文就丑了??我不信~

資深UI設(shè)計者

每次發(fā)英文海報的時候,總會收到留言:“換成中文,就丑了?!彪y道換成英文真的會變丑?下面來看看把英文更換為中文的修改過程。

作者:周妙妍
鏈接:https://www.zcool.com.cn/article/ZMTQ3MjUyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。

標(biāo)簽: ui 界面設(shè)計 設(shè)計流行趨勢 社交APP

移動端UI設(shè)計流程和規(guī)范-從0到1的設(shè)計移動端UI設(shè)計工作方式

資深UI設(shè)計者


一、獲取原型圖

從產(chǎn)品經(jīng)理處獲取項目原型圖,當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計,要先分析了解整個項目的功能、特性、用戶群體、項目的定位等等,特別是對功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通,只有做到對項目了熟于胸才能做出優(yōu)秀的設(shè)計。

二、競品分析

當(dāng)我們對項目的功能、特性、用戶群體、項目的定位都有所了解后,還是不能馬上進(jìn)入設(shè)計環(huán)節(jié)。我們需要先對市面上同類型的產(chǎn)品進(jìn)行分析和對比,包括設(shè)計風(fēng)格、配色、排版、功能樣式等等,了解其優(yōu)劣勢,做到取長補(bǔ)短,思考如何讓我們的產(chǎn)品更加的完善,這時候我們的腦海里面基本上對自己要設(shè)計的東西已經(jīng)有了一個大概的雛形。

三、設(shè)計UI界面

1、界面設(shè)計規(guī)范

這篇文章內(nèi)所有的數(shù)值均以2倍圖為例,使用1倍圖的同學(xué)請自行除以2。

現(xiàn)在UI設(shè)計通常使用的是全面屏的設(shè)計規(guī)范,全面屏的設(shè)計稿更加美觀,且做作品集的時候搭配全面屏樣機(jī)視覺效果也更加突出。通常只設(shè)計一套蘋果全面屏的設(shè)計稿,不需要另外設(shè)計安卓端設(shè)計稿,安卓端由安卓工程師自行適配。

界面尺寸:

界面:750px1624px

狀態(tài)欄:750x88px

導(dǎo)航欄:750x88px

菜單欄:750x98px

指示器:750x68px

左右邊距:32px或24px

*其中狀態(tài)欄和指示器不需要進(jìn)行額外的設(shè)計,是系統(tǒng)默認(rèn)控件,除顏色外不可改變。



常用圖標(biāo)尺寸:

頂部功能:48x48px



底部菜單欄(有文字):48x48px



底部菜單欄(無文字):64x64px




文字:

尺寸:36px、32px、28px、24px



顏色:正常(#333333)、輔助(#999999)、未輸入提示(#CCCCCC)



*利用文字尺寸對比和顏色對比可以得到不錯的效果。也可以給文字顏色添加少量的藍(lán)色,讓顏色不那么呆板。

2、組件控件系統(tǒng)

組建控件系統(tǒng)可以讓我們的設(shè)計稿更加的規(guī)范,也便于修改,可以極大的提高我們的工作效率。

所有的圖標(biāo)都需要做成控件,方便我們切圖。然后就是會重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。

除了我們常用的控件以外,顏色、投影等特殊效果、文字大小都可以保存樣式,把項目的配色、特殊效果、文字尺寸都保存下來,不同的設(shè)計工具有不同的保存方式,大家可以根據(jù)自己使用的設(shè)計工具進(jìn)行設(shè)置。



3、設(shè)計風(fēng)格

我們需要讓項目保持一個統(tǒng)一的設(shè)計風(fēng)格,讓項目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢,選對與項目屬性相符的設(shè)計風(fēng)格可以讓項目更加的出彩。

傳統(tǒng)UI風(fēng)格:

這種風(fēng)格沒找到合適的名稱,我個人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計風(fēng)格使用分割線分割小的模塊,用背景色塊分割大的模塊,特別適合列表信息。雖然給人感覺沒有特別強(qiáng)烈的設(shè)計感,但簡單實用、樸實無華,層級劃分清晰明了。



卡片式風(fēng)格:

卡片式風(fēng)格是借用現(xiàn)實世界中卡片的特征和概念,將一個模塊或同類型元素放到一個卡片容器類,可以增加內(nèi)容的獨立性,讓模塊劃分關(guān)系變得非常的清晰,是現(xiàn)在非常常用的一種設(shè)計方式。

常用做法是采用淺灰的背景+白色卡片的方式,卡片都帶有一定的圓角,類似于將撲克牌一張張的放在桌子上,桌面是灰色背景,每一張撲克牌就是一個卡片。也不排除暗夜模式的卡片式設(shè)計,背景會更暗一些,卡片略亮。




大標(biāo)題去線段化:

在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線,單以間距來區(qū)分模塊和元素,對親密性的應(yīng)用有較高的要求。有時候單以間距來區(qū)分模塊和元素時,可能會導(dǎo)致模塊層級不分明,所以會使用將標(biāo)題加大的形式,讓模塊與模塊之間的區(qū)分更加明顯。因為去除了分割線,留白就更多,會顯得界面更加的干凈、清爽。



新擬態(tài)設(shè)計風(fēng)格:

新擬態(tài)是19年底在追波開始出現(xiàn)的一種設(shè)計風(fēng)格,特點是使用統(tǒng)一的光源做出立體的浮雕效果,元素有厚度但沒有紋理和材質(zhì)的輕擬物風(fēng)。

常規(guī)做法是假設(shè)一個統(tǒng)一的左上方光源,給元素分別添加一個左上角和右下角的投影,左上角(被光源照射的一側(cè))投影使用亮色,右下角投影使用暗色,讓元素可以浮起來。而在按下或選中狀態(tài)時則使用兩個內(nèi)陰影,左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個顏色,所以顏色不能使用純白或純黑,否則有一側(cè)的投影就會看不見,通常是使用藍(lán)灰色或深灰色背景。

新擬態(tài)風(fēng)格視覺效果新穎、柔和,對比度低,看得久了會產(chǎn)生一定的視覺疲勞,研發(fā)成本也較高,所以現(xiàn)在更多的還是處于概念稿,實際項目中應(yīng)用較少??梢宰鳛橐环N練習(xí)或部分功能的使用。





四、交付

1、切圖

設(shè)計稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開發(fā),IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。


切圖套數(shù)

IOS:現(xiàn)在通常是輸出2套,以@2x、@3X為后綴,也就是2倍圖、3倍圖;

Android:現(xiàn)在通常是輸出3套,xhdpi(超清,對應(yīng)IOS的2倍圖)、xxhdpi(超超清,對應(yīng)IOS的3倍圖)、xxxhdpi(超超超清),安卓切圖不需要將倍數(shù)加到切圖命名內(nèi),而是每種尺寸單獨建立一個文件夾。




輸出格式

png:最常用的切圖文件格式,背景無底透明,所以在導(dǎo)出切圖文件時需要先去掉背景色(figma將畫板填充色隱藏,sketch畫板不要勾選“包含于導(dǎo)出項”);


svg:矢量切圖,需要背景無底透明,部分網(wǎng)頁端項目可能需要svg格式的切圖文件;


bmp:部分硬件機(jī)器的項目需要使用的圖片格式,需要注意的是bmp無法實現(xiàn)背景透明,如果背景是透明的會自動帶上白色,需要切圖文件把背景帶上一起切,而且figma和sketch等UI設(shè)計軟件無法直接導(dǎo)出bmp格式,需要先導(dǎo)出為png或jpg格式,再使用ps或其他工具轉(zhuǎn)換一次。


切圖命名

只能使用英文、下滑線、數(shù)字進(jìn)行命名,不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態(tài)(有些切圖沒有多種狀態(tài)則不需要添加狀態(tài)命名)。

以蘋果端舉例:如底部菜單欄的首頁圖標(biāo)命名則是ico_bottom_home_nor@2x(圖標(biāo)_底部_首頁_未選中狀態(tài))和ico_bottom_home_sel@2x(圖標(biāo)_底部_首頁_選中狀態(tài))。



頂部的搜索圖標(biāo)沒有多個狀態(tài),命名是ico_nav_search@2x(圖標(biāo)_頂部_搜索)。



類別一般只有3種:圖標(biāo)(icon)、圖片(image)、按鈕(button),我們通常會簡寫為ico、img、btn。




狀態(tài)一般只有4種:正常(normal)、按下(press)選中(selected)、禁用(disabled),我們通常會簡寫為nor、pre、sel、dis。pc端會多一種狀態(tài):懸停(hover)。




sketch和figma等UI設(shè)計軟件可以同時導(dǎo)出多個尺寸的切圖文件和前綴/后綴,所以我們只需要設(shè)置圖標(biāo)本身的命名如ico_bottom_home_sel,而不需要每個切圖都去手動的添加IOS后綴的@2x和@3X,以及安卓的前綴xhdpi等,在導(dǎo)出設(shè)置中設(shè)置好每個尺寸的文件夾名稱和后綴,再統(tǒng)一導(dǎo)出即可。




切圖輸出

軟件內(nèi)部導(dǎo)出:現(xiàn)在的UI設(shè)計軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件,只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴,就可以快速的導(dǎo)出切圖文件;


上傳第三方:最常用的就是將設(shè)計文件上傳至藍(lán)湖,研發(fā)人員可以在藍(lán)湖上下載自己需要的切圖文件,但在上傳藍(lán)湖之前需要把設(shè)計稿中需要切圖的元素設(shè)置為切片。


2、標(biāo)注

和切圖文件一起交付給開發(fā)的還有設(shè)計稿的標(biāo)注文件,讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對齊方式、距離、透明度,文字的字體、字號、行高等。


輸出到藍(lán)湖

很多設(shè)計文件都可以安裝藍(lán)湖插件,再通過插件將設(shè)計稿導(dǎo)出到藍(lán)湖,研發(fā)人員就可以便捷的查看界面的標(biāo)注。


軟件內(nèi)部標(biāo)注

Figma、Mastergo等在線設(shè)計軟件都可以切換為開發(fā)者模式,只需要將研發(fā)人員邀請到自己的設(shè)計文件所在團(tuán)隊內(nèi),研發(fā)人就可以查看到界面的標(biāo)注;


插件導(dǎo)出

有部分公司有一定的保密措施,會禁止設(shè)計師使用第三方平臺或是聯(lián)網(wǎng)操作,這種情況設(shè)計也無法使用Figma、Mastergo等在線設(shè)計軟件,只能使用Sketch等客戶端,輸出標(biāo)注就需要使用相應(yīng)的插件,Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標(biāo)注文件。


五、上線

在項目上線的階段UI設(shè)計需要輔助研發(fā)提供上線應(yīng)用商店需要的項目預(yù)覽圖、啟動LOGO,也需要設(shè)計補(bǔ)充出APP的啟動頁、閃屏頁等。


1、項目預(yù)覽頁

上線應(yīng)用商店需要的預(yù)覽圖,通常是使用項目中比較有特色的幾個UI界面加以設(shè)計。


2、啟動LOGO

上線應(yīng)用商店必須提供的LOGO,手機(jī)中啟動APP的入口,但不同的應(yīng)用商店有不同的尺寸,華為、蘋果、小米、三星、應(yīng)用寶等所需要的啟動LOGO都有所不同,所以輸出多個尺寸。以蘋果App Store為例,需要以下尺寸:




3、啟動頁、引導(dǎo)頁

啟動頁和引導(dǎo)頁一般是和UI界面一起設(shè)計,不過需要項目上線后才會有其價值,所以可以先設(shè)計完項目的界面,在研發(fā)開發(fā)的過程中再去設(shè)計啟動頁和引導(dǎo)頁,只要在項目上線前提供給研發(fā)就可以。


六、持續(xù)跟進(jìn)和優(yōu)化

當(dāng)一個項目上線后,只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個項目上線后都會收集用戶反饋,根據(jù)用戶反饋的信息優(yōu)化功能和界面設(shè)計,通過持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來越好,這個過程中也需要我們UI設(shè)計不斷的去進(jìn)行調(diào)整和優(yōu)化。


作者:Mu姜子
鏈接:https://www.zcool.com.cn/article/ZMTQxMDY1Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

日歷

鏈接

個人資料

存檔