UI設計中文字和圖片不對齊

㈠ UI設計中如果圖標大小不一致一般怎麼處理

首先，這種方法製作出來的圖標大小為48px*48px，需要其他尺寸的圖標可以做完之後等比放縮即可，放縮過程中可能需要注意半像素（見下文）的問題。

Material Design把圖標的形狀類型分為三種：圓形、方形和矩形。其中圓形的半徑為44px，方形的邊長為38px，矩形為44px*32px。

怎麼判定圖標應該套用那種尺寸的？有一種方法是：將圖標與上圖的模板居中對齊，然後中心不動，放大圖標使之圖標依次碰到三種形狀的邊界，填充最滿的那個形狀的尺寸就是該圖標需要規定的尺寸。如下圖，依次將設置圖標放大並使之接觸到不同形狀的邊界，可以看到在圓形里，該圖標最大，證明設置圖標最匹配圓形，所以使用圓形的尺寸44px*44px。

順便把這次整理圖標遇到的坑也記錄一下：

1. 關於半像素的問題。

半像素的問題主要是在進行Android不同尺寸適配的時候，有時候開發會要求圖標不能出現非整數的尺寸，不然可能圖標就會糊掉。所以在設計Android端使用的圖標時，注意一下這個問題。適當地對尺寸進行四捨五入一下即可。

2. 關於iconfont的問題。

現在大部分團隊都會將圖標轉換為iconfont，這樣可以縮小整個項目的大小。圖標在轉換為iconfont的時候，會忽略所有的線條（包括填充色塊的邊）。所以，如果圖標中有線條，則需要利用高度為1px的矩形代替，色塊的邊長需要用色塊疊加來替代。

3. 關於對齊的問題。

如果有仔細看，我這個方法指定的圖標大小為48px*48px，但是裡面有內容的部分，比如說圓形，就只會占據44px*44px，這時候我們當然會希望把圖形放置在圖標的中央。免不了就會使用對齊工具，咻咻兩下，一個上下居中對齊，一個左右居中對齊，搞掂。但是，慢著，如果仔細發現一下，你會發現看上去並不是居中的。這是由於人的視覺錯覺造成的，這時候就需要進行適當的調整，通過自己的視覺判斷來進行對齊。

4. 關於顏色統一的問題。

一般而言，圖標設定為同一個色值（比如#999999）就能統一顏色，但是也有遇到過某個圖標會顯得顏色比較淺，具體原因未知，這時候就需要進行特殊的處理，比如設定更加深的顏色，比如#333333，具體通過自己視覺調整即可。

㈡ UI設計中的文字到底應該怎麼設計

針對文字這一塊，一般不需要UI設計師操心，程序員會針對不同的操作系統，使用不同的字體（想IOS系統，對中文字和英文字的字體都是有要求的）。如果是藝術字，那就需要UI設計師自己設計了，做好之後要切圖給程序員！

㈢ ui設計流程圖怎麼做

一、流程圖工具

1、Mindnode

Mindnode是在Mac和IOS上的流程圖工具，它同時具備專注性和靈活性。是進行頭腦風暴和組織規劃生活事務的絕佳工具。

4、MindManager

其實，思維導圖工具都是大同小異，具體的你用的舒不舒服，需要你親自實踐，你覺得哪個合適你，你就選擇用哪一個。

有關UI設計的工具可以看《ui設計工具大揭秘》

㈣ UI設計常用字體有哪

1.平平穩穩:微軟雅黑/方正中黑
微軟雅黑系列：在網頁設計中這款字體使用的非常平凡，這款只無論是放大還是縮小，形體都非常的規整舒服。在設計過程中建議多使用雅黑，大標題用加粗字體，正文用常規字體。
方正正中黑系列：中黑系列的字體筆畫比較銳利而渾厚，一般運用在標題文字中。但這種字體不適用於正文中，因為邊緣相對比較的復雜，文字一多會影響用戶的閱讀。

㈤ 到底什麼是UI設計規范

沒有規矩，不成方圓。UI設計也不例外，具有設計規范，系統建議的規范可以讓我們設計具有統一性，界面視覺更美觀。

想要高效順暢地完成設計任務，就必須遵守UI設計的規范。

今天帶來的這些規范，可是成為優秀UI設計師必須知道的"純干貨"，還能讓大家深刻了解UI設計規范的本質是什麼。

圖標規范

很多設計師以為UI設計就是設計圖標。雖然事實並非如此，但圖標的設計在整個UI設計中是比較基礎的一個環節。

圖標與品牌標志一樣，在設計時都需要做適當的減法，應該盡量用簡約的線條去表達其含義，應該盡量避免出現線條結構過於復雜的設計。

而且整體的圖標都需要保持風格一致，例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風格等等。

特別是對於新人，所以大家一起來看看圖標設計的規范吧：

1
像素對齊
需要嚴格的做到像素對齊，尤其是在做較小尺寸的圖標時，如果不嚴格的遵循像素對齊，那最終的顯示效果就會出現問題。

2
多用布爾運算
在做圖標的時候，能用基本圖形進行布爾運算的時候，盡量不要使用鋼筆，這樣做的好處有如下幾點：

o 讓你的圖標更加規范
o 對圖形結構理解更加深刻
o 後期更改形狀更加方便

3
獨特的風格
在做系列圖標的時候，一定要在前期給圖標設定一個風格及原則，使之看起來與眾不同。

在這里值得一提就是，我們在做線性圖標時，一定要保證描邊粗細相同、圓角相同，如果這些基礎的規則都沒有遵循，那也就談不上風格的統一、創新了。
4
視覺大小統一
在進行圖標設計的時候，我們會使用柵格輔助線來幫助我們更加嚴格謹慎，但一定不要被輔助線困住，學會靈活運用，保持視覺上的大小統一。

在如今的APP設計環境當中，一些APP設計大牛都一直強調，設計師要為有品牌意識。

那麼，在圖標的設計中，我們也必須強調"品牌性"，簡單的說就是把品牌中的抽象的概念變成具象化的圖形，把品牌主副色調應用到圖標設計中。

同時建議大家每個星期完成一個主題的作品，提升自己的平面設計能力。

標注規范

如何把標注的思路整理清晰--結構化思維進行拆解，將大問題拆解成小問題，逐一擊破！

標注主要是以下四種不同屬性的內容：尺寸、文字、間距、顏色。
在進行標注時，首先去除導航欄和標簽欄，因為這些控制項通用性非常強，需要單獨拿出來進行統一標注，這里我們只對內容區來進行標注示例。

㈥ UI設計和平面設計有什麼區別，該怎麼選擇

很多人都不能分清平面設計和UI設計在本質上有什麼不同，甚至認為兩者都是設計，沒什麼區別。其實不然，UI設計和平面設計有很多不同。
平面設計：也叫做視覺傳達設計，是以「視覺」作為溝通和表現的方式，透過多種方式來創造和結合符號、圖片和文字，藉此作出用來傳達想法或訊息的視覺表現。
UI設計：是對軟體的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI，互聯網常用的UI設計是虛擬UI，UI即User Interface(用戶界面)的簡稱。
設計載體的差異
平面設計通常以各種紙張平面為載體，設計師以毫米為單位進行設計工作。往往存在這種情況，只是相差一毫米，一個包裝盒就無法成型。而UI設計是以像素為度量單位的，舉個最簡單的例子，寬度30毫米的方格可以和寬度1毫米的直線居中對齊很簡單，但是寬度30
像素的方格是無論如何不可能和寬度1像素的直線對齊的。這就是很多非專業UI設計師在設計框架結構時常常出現錯誤的原因。
兩者應用的方向不同
平面設計由於更多地針對視覺進行設計，因此要更多地注重視覺上的美觀，要符合大眾的審美，更多地注重色彩搭配，版式排布、字體字型大小等視覺上的展現形式，應用的方向也都是為了吸引看到的人。讓他們覺得眼前一亮，就算成功了。
但是UI設計需要在虛擬應用的界面上展示，更多要注意的是用戶的應用體驗和使用感受。如果你設計的界面在操作上特別麻煩，不舒服，那無論多麼好看的設計都是失敗的。
這里我更建議你選擇UI設計

㈦ UI設計的時候要注意什麼

學UI設計需要注意的問題：

1.簡易性。界面的簡潔是要用戶便於使用、便於了解產品，並能減少用戶發生錯誤選擇的可能性。

2.用戶語言 界面中要使用能反應用戶本身的語言，而不是游戲設計者的語言。

3 記憶負擔最小化 人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

4.一致性 它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。

5.清楚 在視覺效果上便於理解和使用。

6.用戶的熟悉程度 用戶可通過已掌握的知識來使用界面，但不應超出一般常識。

7.從用戶習慣考慮想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計，如：書籍對比竹簡。

8.排列一個有序的界面能讓用戶輕松的使用。

9.安全性 用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。

10.靈活性 簡單來說就是要讓用戶方便的使用，但不同於上述。即互動多重性，不局限於單一的工具(包括滑鼠、鍵盤或手柄、界面)。

11.人性化 高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並能保存設置。以上在設計UI作品是需要有的思維，所以不妨在設計前，先構思一下，是否符合這些標准，才給老闆客戶交稿吧!

如果有興趣學UI設計的話，建議花60秒時間點擊下方評論測試一下自己適不適合學：↓↓

㈧ UI設計網頁設計字體規范應該要注意什麼

下面列出UI設計網頁設計字體規范特點：

微軟雅黑/方正中黑：在網頁設計中這款字體使用的非常頻繁，這款字無論是放大還是縮小，形體都非常的規整舒服。在設計過程中建議多使用雅黑，大標題用加粗字體，正文用常規字體。

方正正中黑系列：中黑系列的字體筆畫比較銳利而渾厚，一般運用在標題文字中。但這種字體不適用於正文中，因為邊緣相對比較的復雜，文字一多會影響用戶的閱讀。

方正蘭亭系列：整個蘭亭系列的字體有大黑、准黑、纖黑超細黑等。因筆畫清晰簡潔，這個系類的字體就足以滿足排版設計的需要。可以通過對這個系列的不同字體進行組合，不僅能保證字體的統一感，還能很好的區分出文本的層次。

漢儀菱心簡/造字工房力黑/造字工房勁黑：在這幾個字體中，他們有著共同的特點，字體非常的有力而厚實。基本都是以直線和斜線為主。適合廣告和專題使用。在使用這類字體的時候我們可以使用字體傾斜的樣式，讓文字顯得更為活力。

在這三種字體中，菱心和造字工房力黑在筆畫、拐角的地方採用了圓和圓角。而且筆畫也比較的疏鬆，更多的有些時尚而柔美的氣氛。而勁黑這款字體相對更為厚重和方正。這類字體使用在大圖中偏多，效果比較突出。

宋體：Win最常見的字體，小字體點陣，大字體TrueType,但是大字體並不好看，所以最好別做標題。適用於復古，典雅，傳統，品質，靈動等主題。

Arial：Helvetica的「克隆」，和Helvetica非常像，細節，上比如R和G有小小差別。如果字型大小太小，文字太多，看起來會有些累眼。Win和Mac顯 示都正常。

(8)UI設計中文字和圖片不對齊擴展閱讀

UI設計規范：

網頁的布局主要有兩種：左右布局和居中布局。布局不一樣使設計的空間也不相同。

⑴、左右布局，靈活性強，UI限制小；左右通欄為導航欄，寬度沒具體限制，可根據實際情況調整；右側為內容板塊范圍，是網站內容展示區域。

⑵、居中布局，中間的深色部分為有效的顯示局域，用於網站內容的展示；兩邊留白沒實際用圖，只是為適配而存在

當前最流行的解析度是1920px*1080px的，所以建議創建網頁尺寸為1920px*1080px，頁面中心區域常設置為1200px（或1000px -1400px區間），以這個尺寸來設計相對標准。每個屏幕的高度約為900px。因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。

網站的字體大小並沒有硬性規定具體的字型大小，根據實際情況可以酌情考慮，但是要使用偶數字型大小。

1、字體規格也不需要太多，最多使用三種混搭，當一個頁面中使用的字體超過 3 種時，會給用戶帶來「不專業」、「沒有權 威性」、「沒有層次結構」之類的感覺。

2、層次的區別，可以改變字體顏色或加粗來體現。

3、字體優先使用各操作系統默認的字體。字體選擇有版權、筆畫嚴謹、清晰可讀、經典。

㈨ 如何體現在UI設計中細節展示

UI的組成元素？界面大多都是由字體，圖形，色彩構成的，這也是設計三大要素。那麼在設計中，我們如何去處理好裡面的關系呢，今天和大家分享一些常用的設計技巧，幫助大家在做設計時候更好去排版，英文示例只說明技巧中文同樣適用。▲我們嘗試把上圖這個UI界面拆分一下，可以看到界面基本都是由字體、色彩、圖形三大板塊組成的。 ▲同理：上圖我們按照同樣的方式去拆分，依然可以獲得三部分的內容 字重創建層級▲我們都知道字體是有重量的，不同的字重可以體現界面層級，特別是現在的iOS風格中，更強調通過字重對比來提升視覺層次，但是很多設計師只知道運用字體大小去做對比，卻忽略了：運用字重和顏色去做層級區分同樣適用。 ▲這段文字比較重要，就加大，這個文字次要就縮小,這是大多數設計師做設計的習慣，但是不要過多依賴大小對比去區分層級 ▲我們可以嘗試通過加大字重，同樣可以達到效果 ▲可以感受一下當視覺字重變化時，整體版面的層級區分 ▲字重的對比在平面設計，版式設計運用比較多 ▲品牌設計中，不同字重帶來視覺感受和舒適度是截然不同的 ▲商品卡片設計中，通過字重區分層級的視覺效果，信息捕捉效率顯然要比整個版面都用統一字重要更快。 顏色創建層級在UI排版中，除了字體層級，顏色也是很重要排版手法之一，做界面時候不要只用一種顏色，主要內容黑色，次要內容灰色（文章日期等）輔助內容淺灰色，然後結合前面所說字重運用，能很好的和信息組成視覺節奏。 ▲界面中的線條和色塊都是區分層級的輔助手段，按照界面調性去實際調整 ▲錯誤做法：讓文字變成淺色比較適合在白色背景下，如果不彩色背景上面使用灰色，因為帶色彩背景和灰色如果一起使用，會顯得界面特別臟，識別度還低 ▲通過對圖片，彩色背景通過降低透明度的效果會更加好 ▲通過降低文字透明度也能拉開視覺層級 ▲選擇與背景相同的色相，直到飽和度合適為止 投影運用創建層級市面流行風格裡面，投影運用大都比較多，但是在用投影的時候，我們需要盡量保持它的干凈和利索，不要使用過大的投影值和擴散范圍，盡量使用柔和投影或者垂直投影。 間距創建層級 ▲我們在做很多設計的時候，容易用到很多分割，什麼時候用線什麼時候用投影，如何讓界面更加干凈，有時候通過留白來區分層級，效果會比線更加干凈清爽。 中心軸創建層級 ▲這個頁面中，很明顯左邊比右邊好，右邊信息缺少對齊和呼吸感，左邊有一條明顯中心軸讓頁面更加的清晰。 總結今天和大家分享的只是UI界面中一部分經典區分層級的要素特點，希望大家都能舉一反三，運用到自己的作品中去，做出更多具備細節感受的作品！

㈩ 在UI設計創作時要注意些什麼

在UI設計創作時要注意些什麼，UI設計作為信息設計的一部分，它正在悄然出現在我們的生活。UI即User Interface（用戶界面）的簡稱。UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品位，還要讓軟體的操作變得舒適簡單、自由，充分體現軟體的定位和特點。

③顏色的協調。為讓設計更具吸引人的亮點，細心、科學的選擇顏色，是一個不錯的選擇，它是一種用來烘托主題的重要手段。例如，彩色的搭配能打破視覺單一，促進交互行為。

選擇不同的配色技巧時，要考慮色彩如何最好地與品牌相結合，並為用戶服務。要產生最佳效果，就要帶著特定目的運用色彩，通過設計吸引用戶，促使他們採取行動。無論是使用淺色還是深色，或者是純色和流行混搭，色彩都能影響用戶對於設計的認同和使用頻次。

學習UI設計注意這幾點

UI設計