界面設(shè)計中的不完美之美

2022-6-10    博博

有時我們傾向于將我們的設(shè)計視為藝術(shù)品。但如果我們用這種方式來思考它們,就意味著它們不會準備好面對“現(xiàn)實世界”的不確定……

時我們傾向于將我們的設(shè)計視為藝術(shù)品。但如果我們用這種方式來思考它們,就意味著它們不會準備好面對“現(xiàn)實世界”的不確定條件。但是,設(shè)計一個可以隨時改變的界面也很美 - 而且,讓我們承認它,接口確實一直在變化。我最喜歡設(shè)計移動應(yīng)用程序的一個方面是,從最初的概念到你對所有界面細節(jié)進行微調(diào)和拋光的時候,這是一個包含許多步驟的過程。

我們是視覺思考者,擁有訓(xùn)練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設(shè)計階段的原因,這也是我們可能對其他任務(wù)感到厭倦的原因之一。

這也意味著我們經(jīng)常推遲工作流程的其他重要部分:定義用戶需求和目標,草擬任務(wù)流程,處理信息的所有細節(jié)和交互設(shè)計等。這些是同樣重要的是,它們更抽象,更難以讓人想象它們將如何成為最終產(chǎn)品的有形部分。

當我們正在進行視覺設(shè)計時,所謂的像素完美哲學(xué)可能是一個陷阱,使我們花費更多的時間來制作細節(jié),直到最小的細節(jié)處于界面的“完美”位置。這導(dǎo)致一代設(shè)計師使用Dribbble和Behance主要顯示應(yīng)用程序和網(wǎng)站的精美屏幕,并且更關(guān)注外觀而不是設(shè)計實際工作方式。在現(xiàn)實世界中,事情往往不如我們期望的那樣好。

就個人而言,我認為最好的設(shè)計(當談到用戶界面設(shè)計時)不僅外觀和感覺良好,而且還可以優(yōu)雅地響應(yīng)變化的條件甚至不可預(yù)測的情況。

在構(gòu)建產(chǎn)品的漫長道路上,設(shè)計師需要更多的協(xié)作,而不是專注于視覺設(shè)計。這正是我為了這篇文章專注的地方。在接下來的幾段中,我將向你提供一些提示和技巧,說明如何將你正在進行的應(yīng)用程序設(shè)計用于測試,并了解它是否已準備好發(fā)布到市場。

在不完美中尋找美

當我在大學(xué)學(xué)習平面設(shè)計時,他們教會了我們平衡,對齊,比例和張力的美感,以及如何在空間中定位元素,使它們和諧悅目。憑借這些知識,我的生活發(fā)生了變化,我開始以不同的眼光看世界。后來,我開始設(shè)計界面,我試圖將相同的原則付諸實踐,屏幕上的所有信息都應(yīng)該形成一個非常令人滿意的視覺構(gòu)圖。

如果你將這些原則應(yīng)用于移動應(yīng)用程序設(shè)計,那么我們發(fā)現(xiàn)必須顯示適量的信息。例如,如果一個屏幕必須列出人們的姓名,設(shè)計師通常會選擇一些短而普通的名字,并將它們完美地排列在一起,沒有留下任何可能破壞設(shè)計或使其在以后崩潰的意外長名稱的空間。

這種方法基于這樣的假設(shè):在混亂和不完美中沒有美,盡管這兩個方面在現(xiàn)實世界中經(jīng)常出現(xiàn)。但是視覺界面并不是一件值得欣賞的靜態(tài)藝術(shù)品; 它們是動態(tài)的,功能性的空間,可以改變和適應(yīng)每個人使用它們。我們不應(yīng)該屈服于純粹為美學(xué)設(shè)計的誘惑,因為我們永遠無法控制界面必須呈現(xiàn)給人們的一切。

相反,我們必須設(shè)計變革!這就是日本人所說的wabi-sabi,一個“以接受短暫和不完美為中心的世界觀”。

因此,以不同的方式思考和設(shè)計是很重要的:

● 嘗試以多種方式在你的設(shè)計中呈現(xiàn)數(shù)據(jù);

● 盡可能使用真實數(shù)據(jù)。

當你嘗試以幾種方式呈現(xiàn)數(shù)據(jù)時,包括一些不可預(yù)測的數(shù)據(jù),你將能夠測試界面是否已準備好處理超出設(shè)計“舒適區(qū)”的這些情況。此外,為極端情況做好準備。

如果你已經(jīng)推出了該產(chǎn)品,這將更容易,因為你可以關(guān)注實際數(shù)據(jù)并將其用于你正在進行的設(shè)計過程中作為參考。但是如果你正在研究一些新的東西,那么你將不得不深入挖掘,做一些研究,并嘗試了解以后如何信息。你還可以與后端團隊的開發(fā)人員討論此問題,他們將能夠更好地向你解釋將存儲和呈現(xiàn)的數(shù)據(jù)類型。

 

我給你一個更具圖形的例子,我的開發(fā)者朋友稱之為“漂亮的朋友綜合癥”。當我們設(shè)計一個包含人物圖片的屏幕時,如用戶檔案,我們傾向于使用在設(shè)計中看起來很好并且很漂亮的人的照片。然而,當他看到這樣的設(shè)計時,我的朋友說:“我希望我有朋友這么帥?!?

因此,“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣,你就可以測試重疊元素在不同背景下的外觀,讓你可以看到對比度和易讀性是否仍然完好無損。

不要過于樂觀

對于應(yīng)用程序的工作方式,我們天生就是樂觀主義者。我們認為一切都會快速順利地進行,而且不會中斷,因為......為什么不呢?這就是為什么我們有時會忘記如何設(shè)計和處理用戶可能在以后遇到的一些可能不那么好的情況。

列舉幾例,如果突然互聯(lián)網(wǎng)連接中斷,會發(fā)生什么?或者,如果瀏覽器在執(zhí)行任務(wù)時嘗試連接到API時出錯?如果連接速度太慢,是否會有加載指示器(例如微調(diào)器或進度條),或者在加載實際數(shù)據(jù)時是否會有一些占位符填充顯示塊?那么刷新應(yīng)用程序的某些屏幕的可能性呢?什么時候(以及在哪種情況下)可能?

正如你所看到的,我不是在談?wù)撚脩羲傅腻e誤(例如,在填寫表單時犯了錯誤),而是關(guān)于不受其控制但仍然發(fā)生的錯誤。在這種情況下,與開發(fā)人員交談,并了解不同屏幕上可能出現(xiàn)的問題,然后設(shè)計一種可以讓用戶輕松解決問題的方法,讓他們可以選擇稍后再試或者執(zhí)行不同的操作。

無論如何,確定觸發(fā)每個錯誤的特定條件并為每個案例設(shè)計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當?shù)捻憫?yīng),并知道下一步該做什么來解決問題。即使它有點麻煩,也不惜一切代價避免使用通用錯誤消息。

理解流程

界面包括許多元素,它們一起形成應(yīng)用程序的整個布局。然而,當我們把重點放在用戶界面上的一個整體,我們往往忘記了一些元素也有較小的任務(wù)來執(zhí)行的總體目標做出貢獻。

如果有一個觸發(fā)某種交互的按鈕或項目,那么請向前看并考慮下一步:在執(zhí)行操作時是否會顯示加載狀態(tài)?它可以因某種原因被禁用嗎?如果用戶按住按鈕一段時間該怎么辦?會有任何反饋意見嗎?就像整個屏幕有不同的狀態(tài)一樣,同樣也適用于單個元素。

此外,請考慮產(chǎn)品的邏輯如何與用戶的心智模型相匹配,幫助他們準確有效地實現(xiàn)目標并以有意義和可預(yù)測的方式完成他們的任務(wù)。

我要做的就是解決所有這些問題,就是停止我正在做的事情,暫停,退后一步,查看整個多屏幕流程的大局,并了解一系列步驟和動作。我將尋找導(dǎo)致該點的多條路徑,以及遠離它的多條路徑。

你可以在使用原型時做同樣的事情,慢慢地,認真地,謹慎地執(zhí)行動作。如果這對你來說太具有挑戰(zhàn)性,因為你之前可能已經(jīng)多次這樣做了,現(xiàn)在它變成了一種自動化的任務(wù),并問同事,朋友或活躍用戶看看設(shè)計或原型??吹狡渌耸褂貌⑴c你的設(shè)計進行互動可能很有啟發(fā)性,因為我們往往過于接近并且過于熟悉它,因此可能會忽略一些事情。

為您的屏幕設(shè)計

當我在設(shè)計時,我通常會將手機放在我旁邊,以便我可以預(yù)覽我的工作并實時進行調(diào)整。

我認為這是一個很好的做法,但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸(特別是在Android平臺上); 試著考慮所有可能的變化。

知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設(shè)備。

在為各種屏幕尺寸和方向準備設(shè)計時,不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況,以及如何進行必要的調(diào)整,即使它意味著偏離原始設(shè)計。

在這些情況下,我們之前討論過的相同原則仍然適用:不可預(yù)測的情況,不同類型的內(nèi)容,可變數(shù)量的信息,缺少數(shù)據(jù)等等。你必須針對各種可能的場景進行設(shè)計。不要陷入將屏幕設(shè)計為產(chǎn)品的單獨部分的陷阱,它們都是相互連接的。

這不僅對你有用,而且對開發(fā)人員也有幫助,他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。

今天你需要什么,明天你可能需要

你可能已經(jīng)注意到,本文中許多要點的目標是減少意外情況。即便如此,在很多情況下你也無法得到明確的答案。開發(fā)人員經(jīng)常會問,“那么,如果我這樣做會發(fā)生什么呢?”指出你以前沒有考慮過的潛在結(jié)果。

如果發(fā)生這種情況,那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考,并考慮如何將該特定問題的答案設(shè)計為以靈活的方式工作,以便你以后可以重用它。

畢竟,這就是我們UI設(shè)計師所做的 - 我們設(shè)計和定義適應(yīng)未預(yù)料到的狀態(tài),條件和流程的靈活系統(tǒng)。將你的界面視為移動,更換智能部件的生動生態(tài)系統(tǒng),而不是單個像素塊的集合。

在此過程的這一部分中,你需要與團隊中的開發(fā)人員密切合作,主要是為許多不同情況定義一組行為規(guī)則。但保持良好的平衡 - 盡量不要過度設(shè)計。用一點常識來設(shè)定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住,良好的設(shè)計系統(tǒng)是靈活的,并且在某些情況下為規(guī)則的某些例外做好準備。

另一方面,想一想你已經(jīng)設(shè)計過的元素如何調(diào)整以適應(yīng)新的情況。如果你創(chuàng)建一個設(shè)計組件庫,你將會看到更好的結(jié)果,因此,只需快速瀏覽一下庫,你就會知道是否需要從頭開始設(shè)計某些東西,或者你可以使用現(xiàn)成的東西。

結(jié)論

基于設(shè)計系統(tǒng)的優(yōu)雅解決方案具有明確定義的問題將使我們工作中的視覺設(shè)計更加有趣,因為我們可以專注于界面的改進,拋光和愉悅,而無需無休止地迭代。當我們過早地跳到視覺效果時,我們必須同時解決問題并制作界面,這通常會導(dǎo)致沮喪和倦怠。

改變你的工作流程可能在一開始就具有挑戰(zhàn)性,但過了一段時間你會喜歡在限制范圍內(nèi)工作。這也將改變你的思維方式,并希望幫助你擺脫對視覺細節(jié)的關(guān)注。你將成為一個更加完善和有能力的用戶體驗設(shè)計師,使用適當?shù)目山桓冻晒?,而不僅僅是生成無窮無盡的視覺模型和組合。


作者:視覺設(shè)計_小強哥

轉(zhuǎn)載請注明:站酷

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

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔