在大大都環境下,咱們偏向于低估咱們熟習的事物。咱們很能夠或許會低估那些固然很新但處置起來很簡略的任務。在某種水平上,這是準確的。可是,當咱們面對龐雜的案件并接納一切辦法時,對根本常識的杰出而踏實的懂得能夠或許贊助咱們找到準確的處置計劃。
 
在本文中,咱們將深切地研討網站開辟中最簡略但常常被低估的勾當之一,即線框設想。咱們將找出甚么是線框,為甚么須要設想它,若何從線框設想中取得最大收益,和若何使線框更上一層樓。
 
按照CB Insights的“二十大創業失利緣由”報告,有17%的創業者以為缺少用戶友愛是失利的緣由。設想用戶友愛的界面并不是一件輕易的事,出格是對大型且龐雜的產物(此中要構造良多實體,依靠干系和元素)而言。要設想如斯龐雜的產物,您應當遵照自上而下的方式,線框設想是能夠或許贊助您處置此題方針最好手藝。
 
起首,讓咱們界說術語
 
線框 -也稱為頁面表現圖或屏幕藍圖,它是一種視覺指南,表現網站或操縱法式的骨架。咱們看到其界說是線框圖 -設想線框的進程,凡是用于在斟酌用戶須要和用戶路程的環境下在頁面上支配內容和功效。在增添視覺設想和內容之前,在開辟進程的初期就操縱線框來成立頁面的根基布局。乍一看,線框圖看起來很簡略。這里存在一個首要題目:咱們偏向于對簡略的事物不賜與充足的正視。贊助咱們從線框圖中取得最大收益的一種方式是界說產物或辦事的方針。咱們能夠或許取得的線框圖的首要方針是向團隊和益處相干者展現操縱法式將要具備的實體,頁面和組件,和數字產物的這些元素將若何彼此感化。
 
從方針界說中,咱們能夠或許看到線框圖對開辟進程和終究產物的影響有多大。當咱們服膺線框進程的方針時,咱們仍然須要注重在線框設想進程中應防止的罕見圈套。

咱們要防止的線框設想毛病
 
為“復選框”建立線框;
完全跳過線框階段;
在視覺設想以后籌辦線框;
不大白為甚么要操縱線框。
 
線框應當在視覺設想階段之前,反之亦然。這就像在編寫代碼以后決議操縱法式的手藝一樣。線框設想為設想品質奠基了根本,并且咱們對這一階段的方針領會得越多,咱們能夠或許取得的益處就越多。是以,讓咱們深切研討一下,找出為甚么咱們須要設想線框和該手藝帶來的代價。缺少產物設想常識的企業能夠或許會跳過線框設想的做法,因為這能夠或許下降名目本錢,可是從久遠來看,這一決議能夠或許會致使潛伏的失利。作為設想師,您應當詮釋咱們為甚么如許做,它將若何贊助終究產物,和若何節流將來的用度。
 
接上去,讓咱們查抄一些能夠或許贊助您更好地懂得為甚么須要線框的要點,并查抄線框若何贊助您從開辟職員,客戶和產物的將來用戶那邊取得反應。
 
為甚么要設想線框
 
贊助您的團隊評價和完美任務規模
 
線框使設想師能夠或許疾速建立將來產物的視覺表現,并向團隊展現以停止所需的訂正。線框還能夠或許贊助您向團隊展現操縱法式將要具備的頁面,每一個頁面大將包羅哪些元素和控件和一切元素若何彼此交互。另外,瀏覽線框比讀取規格要快良多。另外,它另有助于咱們防止初始預算與終究預算之間的規模差別。
 
讓一切團隊成員到場產物設想階段
 
咱們一切人都處于締造一流設想的地位,只是面對開辟限定。線框的操縱使咱們能夠或許閃開辟職員在初期階段就設想停止會商,使他們能夠或許在起頭停止視覺設想之前就供給反應和倡議變動。如許,能夠或許加速設想進程,防止華侈時辰和款項。

可操縱線框的軟件設想和開辟性命周期階段的流程圖。

軟件設想和開辟性命周期的階段,能夠或許以一種情勢或另外一種情勢操縱線框。
 
為客戶停止演示
 
從客戶和益處相干者那邊取得疾速反應是設想進程的主要構成局部。一樣,咱們一切人都履歷了益處相干者的屢次變革要求,這很普通。操縱線框,咱們能夠或許使此進程更有效。與對線框停止變動比擬,對原型停止變動須要更多的時辰和精神,這將使您加倍火速,并且不會在返工上華侈額定的時辰。
 
停止用戶測試
 
按照精益創業公司(Lean Startup)的作者埃里克·里斯(Eric Ries)的說法,越早停止用戶測試越好–不人情愿推出一個操縱法式并發明用戶不準確操縱它的方式。線框能夠或許贊助設想職員從潛伏用戶那邊取得有代價的反應,并且在不須要龐雜的交互式原型時無需破費時辰。UI / UX設想職員操縱線框這一現實并不用然象征著他們做得準確。為此,您應當記著并遵照最好理論。
 
線框圖最好理論
 
為了帶來最好成果并為進一步的UI打下堅固的根本,您須要遵照一些簡略的法則:
 
1.最小化線框中色采的操縱
 
若是您在線框中操縱豐碩的調色板,請提示自身線框的方針(以顯現產物將要具備的元素和它們之間若何彼此感化),并斟酌是不是有額定的色采能夠或許贊助您完成它。

若何最小化線框中色采的操縱示例

盡能夠削減在線框中操縱色采,咱們將為此特地支配一個階段。
 
在某些環境下,是能夠或許的。可是總的來講,向線框增添色采能夠或許會分離觀眾的注重力,并且必定會使更新變得加倍堅苦。另外,另有一個要斟酌的主要題目-并非一切客戶都對UX手藝有很好的領會,能夠或許會操縱黑色線框停止終究設想。

在線框中操縱準確色采的示例

可是,這并不象征著您永久不要在線框上操縱色采,而要嚴酷遵照口角調色板。偶然操縱色采凸起顯現特定組件是公道的。比方,您能夠或許將白色用于毛病狀況,將藍色用于正文等。
 
2.操縱簡略的組件設想
 
在向線框增添組件時,請停止根基設想。線框并不籌算包羅顛末周全設想和具體設想的組件。相反,您的團隊成員和益處相干者應當輕易辨認它們。增添具體的組件將破費您大批的時辰和精神,而不用出格有效。

若何操縱簡略的組件設想并明白其功效方針的示例

用簡略的組件設想并明白其功效方針。
 
3.堅持分歧性
 
在一切線框上,類似的組件必須看起來不異。若是不異的組件看起來差別,則開辟職員能夠或許會質疑它們是不是現實上不異,乃至會因設想差別而增添估量時辰。處置線框時,請記著一個簡略的法則:堅持分歧,并防止形成紊亂。

若何堅持類似組件之間分歧性的示例

堅持類似組件之間的分歧性,并防止對差別的組件操縱不異的表面。
 
4.操縱實在內容
 
咱們會不斷看到UI / UX設想職員不在線框圖上增添實在內容,而是操縱lorem ipsum。這是一個很少有設想師認識到的遍及毛病。您能夠或許會否決,并說內容在設想階段不可用。好了,操縱內容的底稿版本就充足了。
 
在線框中操縱實在內容取代lorem ipsum的示例

操縱實在內容取代lorem ipsum。
 
內容會影響您將要建立的設想,而底稿內容將贊助您做出準確的決議并托付超卓的設想。可是,若是操縱lorem ipsum,您將看不到完全圖片,并且能夠或許須要對UI停止良多調劑,乃至更糟-您將建立沒法操縱的設想。另外,實在內容將為您的線框增添代價,更好地申明高低文,并能夠或許標明您已須要起頭搜集實在內容。
 
5.操縱正文
 
能夠或許會產生某些設想處置計劃沒法直觀顯現的環境,是以涉眾或開辟職員能夠或許會對它們有疑難。比方,某些控件面前的邏輯。在這類環境下,您能夠或許供給屏幕上的正文來詮釋其面前的邏輯。如許,您的團隊將領會您的處置計劃,而您無需破費時辰來會商它們。

操縱正文描寫特定邏輯的示例

操縱正文描寫特定的邏輯。
 
6.低至高保真
 
不嚴酷的劃定。偶然您應當挑選低保真線框,而某些名目能夠或許須要高保真線框。這取決于名目,是以,若是您想向線框增添更多細節,請絕不躊躇地停止。可是按照Eric Ries所說,若是這不能帶來代價,請不要做額定的任務,從根本起頭,而后在須要時增添細節。比方,若是您須要吸收開辟職員注重某些自界說處置計劃,請增添更多具體信息以在線框圖中停止申明。
 
低保真線框和高保真線框的示例

低保真線框和高保真線框都應有的處所。
 
7.將線框擴大到原型
 
作為設想師,咱們操縱差別的產物,此中一些具備簡略而通用的交互,而某些則具備相稱高等的交互。偶然線框缺少以申明龐雜且不罕見的界面之間的彼此感化,可是您能夠或許將線框擴大到交互式原型,而不用寫冗雜的正文并花大批時辰停止詮釋。

交互式原型流程表面的示例

線框設想東西
 
此刻是時辰挑選一流的線框圖東西,該東西將贊助您建立超卓的設想并簡化任務流程。您能夠或許將良多差別的選項用于線框圖,并且您之前能夠或許已操縱了此中的一些。我想給您一個對它們有多差別的根基懂得。
 
大大都線框東西都具備:
 
簡潔性
他們的進入門坎低,很是合適那些在UI / UX設想上邁出第一步并且缺少操縱更龐雜軟件的經歷的人。
合作
這些具備豐碩的團隊合作功效。合作是古代軟件開辟的中堅氣力,是以最好的線框圖東西不只供給良多功效,并且許可到場設想進程的一切團隊成員之間高效而輕松地停止合作。
 
以下是為合作量身定制的最普遍操縱的線框東西:
 
Figma
一個壯大的基于云的東西,包羅在Windows和macOS的網頁版本和桌面操縱法式中。Figma具備良多壯大的功效,可用于構建線框,原型,UI等。

Sketch
此東西在UI / UX設想職員中很是風行。若是您須要超出默許的Sketch東西集,則能夠或許操縱良多插件來取得額定的功效。與良多合作敵手差別,Sketch僅在macOS上可用,您將須要第三方處置計劃停止合作。

您能夠或許操縱良多操縱法式來設想線框。不應僅基于操縱法式中供給的功效停止挑選。相反,倡議您測驗考試摸索一切方面,并肯定最合適您的方式。您能夠或許找到一些最風行的東西來測驗考試。

作為一種簡略的做法,線框設想凡是在一起頭就不取得設想師的充足領會。成果,當咱們要末在線框上增添大批裝潢,要末在名目須要更具體的處置計劃時為了停止框選而建立低保真線框以便停止復選框查抄,則對此手藝的存眷會致使良多缺點。 ,乃至跳過此階段,間接進入可視化UI設想。凡是,一切這些毛病是因為對線框的兩個設想方針領會缺少(即顯現產物將要包羅哪些元素和它們之間若何彼此感化),和對線框甚么時候能夠或許操縱的領會缺少,贊助咱們,比方:
 
線框能夠或許贊助團隊取得更切確的名目預算。
線框能夠或許贊助一切團隊成員到場設想流程,并防止會影響開辟流程的工程毛病。
線框能夠或許贊助咱們盡早向客戶,益處相干者停止演示,并停止用戶測試集會以盡快取得反應,并節流開辟不良處置計劃的時辰。
 
現在,作為設想師,咱們比以往任甚么時候辰都榮幸,因為稀有十種東西可用于設想線框并將此勾當安穩地集成到咱們的普通設想進程中。咱們獨一須要做的便是花一些時辰將手藝和東西整合到咱們自身的設想進程中,并找到一種方式使它們對咱們有效,從而使咱們的設想進程更上一層樓。