UI設計必須要具備的前端知識

2021-10-10 21:25:53 字數 2699 閱讀 3166

ui設計師和前端通常是乙個是藝術出身,乙個是技術出身。卻因為工作不得不經常面對面坐在一起,為各種問題糾纏不清。

前端總覺得設計太過理想主義,稿子裡很多構想根本不完整,還以各種理由給自己找麻煩。設計總覺得前端各種找理由偷懶,開發出的介面明明和設計稿相差十萬八千里,就自以為萬事大吉了。

今天周老師就為廣大設計師們寫一篇比較好懂的科普,以促進雙方在日常工作中更加高效友善地合作。

介面尺寸如何把控?

我們從外至內來看乙個介面區域(手機螢幕/電腦視窗)的尺寸有兩個變數:寬度和高度。

前端搭建介面時,通常只會規定橫向尺寸。也就是說寬度是自變數,高度是因變數。因為使用者的螢幕/視窗尺寸是無法預期的,哪怕都是手機,型號也多到數不清。要讓一款產品能夠在所有型號的硬體上展示,前端開發時不可能設定乙個固定的介面尺寸。

你可以把介面想象成乙個倒置的俄羅斯方塊盒子,在固定的寬度下,長度可以近乎無限延展。

然而ui設計師都是以乙個固定的介面寬度為基礎的,因為這樣設計師就不需要為同乙個方案畫很多不同尺寸的方案。也就是說在理解介面構成時,前端的是基於動態寬度,而ui則是基於靜態寬度,這直接導致了雙方在基礎概念上的不對等。

這就是為什麼設計還原的問題總是難以解決。ui追求的是在標準寬度下,介面能夠100%還原;而前端費解的是,既然使用者的螢幕尺寸根本無法確定,糾結某一特定寬度下是否精確符合設計稿是否有意義?

布局如何跟隨介面尺寸而變化?

那麼當容器寬度發生變化時,介面內部首當其衝受到影響的就是布局。

印刷品的頁面布局通常有左右分欄和上下分欄兩種。

而介面布局反倒更加簡單,通常只需要考慮左右分欄即可。這是因為介面在固定寬度下縱向延展,縱向高度由內部元素的填充情況來決定。

介面尺寸變化時,分欄如何變化?通常有兩種方式:定寬和定比。

定寬常用於pc端。固定一欄的絕對寬度,另外一欄根據容器自由伸縮;或者固定元素的寬度,根據容器尺寸來確定列數。

定比常用於手機端。固定幾個分欄的所佔比例,根據容器寬度自由伸縮。

對於前端來說,通常定寬比定比要簡單得多,所以如果ui不給出明確要求,前端很有可能一律按定寬處理。

元素前面一直在說,介面高度由固定寬度容器內,擺放下的元素來確定,那麼這裡就說一下元素是如何擺放的,從開始。

如果是較小的,例如logo、按鈕或箭頭,通常是給乙個固定尺寸,以左對齊/居中/右對齊的方式擺放在容器中。

第一種方式插入的所占用的高度是固定的,而第二種方式所占用的高度是根據容器寬度而等比變化的(如果是背景圖,當然就不會影響到介面高度了)。

這就是為什麼有的ui用非主流尺寸做設計,把切圖給開發後,在自己電腦上看效果發現相差很遠。介面尺寸發生變化後,看起來難免會有很大不同。

文字元素

介面裡的元素除了之外,其實大量都是文字。

文字的尺寸和行高一般是固定的,並不會隨著容器尺寸而變化。例如你用不同螢幕的裝置開啟一篇文章,你會發現每行字數都是不同的。

當然如果非要技術處理,也可以做到根據容器寬度確定文字尺寸,以求每行字數保持不變。但是這種處理非常麻煩,一般很少用到。

這就是為什麼,ui在標準尺寸螢幕上勉強留夠了文字空間,而在使用者的小屏裝置上展示時,卻排不下幾個字。從前端的角度看,文字尺寸的靈活性,沒有那麼強。

內邊距與外邊距

前端開發時,任何元素或模組都可以有乙個內邊距和外邊距。內邊距用於分割模組裡內容與模組邊緣的距離;外邊距用於分割模組與模組之間的距離。

當元素/模組重複出現時,其內邊距和外邊距可以作為固定屬性重複出現,這樣就避免了**冗餘。

然而,有的設計稿在內外邊距上比較隨便,這可能導致前端開發同學犯強迫症,例如以下幾種情況。

不同頁面的邊距不一樣:

同一級模組的邊距不同:

有的特殊元素偏偏要突破原本定好的邊距:

當然有時候為了視覺效果,我們必須要做一些特殊處理,增加額外的開發工作量無可避免。

然而如果邊距不統一只是因為設計時沒有太在意,這就有可能給前端開發造成無意義的維護成本了。

如果設計按照模組而不是按照頁面來提供方案,前端可能更加高興的,因為他們不用去猜哪些地方可以復用**了,哪些地方又必須單獨寫了。

總結摘自:

容器必須設定寬度嗎 UI設計必須要具備的前端知識

ui設計師和前端通常是乙個是藝術出身,乙個是技術出身。卻因為工作不得不經常面對面坐在一起,為各種問題糾纏不清。前端總覺得設計太過理想主義,稿子裡很多構想根本不完整,還以各種理由給自己找麻煩。設計總覺得前端各種找理由偷懶,開發出的介面明明和設計稿相差十萬八千里,就自以為完事大吉了。今天周老師就為廣大設...

學習Github必須要會的知識

託管專案 存放專案 每個專案對應乙個倉庫,多個開源專案則有多個倉庫。收藏專案,方便下次檢視。深拷貝 被fork物件接受到fork的修改,等待張三檢視 合併。關注專案,當專案更新可接收到通知。發現 bug,但是目前沒有成型 需要討論時用。github主頁 倉庫主頁 個人主頁 向倉庫中新增檔案流程 設定...

作為ui設計師,你必須要熟練的幾款設計軟體

ui設計用什麼軟體?作為ui設計師,你必須要熟練的使用以下幾款設計軟體,不然可能也無法勝任ui設計師的職位。ui設計除了要學習一些基本的操作軟體,如ps ai ae axure 以外呢,還要學習比如配色,排版,字型設計,三大構成,消費心理學,溝通學,以及思維導圖,原型圖,還有互動邏輯,規範,切圖,了...