正文

Ui手機(jī)主題設(shè)計(jì)理念（ui手機(jī)主題設(shè)計(jì)理念是什么）

發(fā)布時(shí)間：2023-04-28 00:50:27 稿源：創(chuàng)意嶺閱讀： 281

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于Ui手機(jī)主題設(shè)計(jì)理念的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、ui設(shè)計(jì)主要是什么？
2、ui設(shè)計(jì)理念怎么寫
3、手機(jī)UI設(shè)計(jì)的基本規(guī)范
4、ui設(shè)計(jì)是什么 Ui設(shè)計(jì)指的是什么

Ui手機(jī)主題設(shè)計(jì)理念（ui手機(jī)主題設(shè)計(jì)理念是什么）

一、ui設(shè)計(jì)主要是什么？

UI即User Interface(用戶界面)的簡稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。說白一點(diǎn)就是界面設(shè)計(jì)，怎么去理解這句話呢！例如互聯(lián)網(wǎng)公司的產(chǎn)品界面。PC端和手機(jī)端的QQ的登錄界面，聊天界面，設(shè)計(jì)都是屬于UI設(shè)計(jì)。用一句話去理解就是互聯(lián)網(wǎng)的產(chǎn)品外觀設(shè)計(jì)，想要學(xué)習(xí)了解更多。也就是說所有的互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計(jì)都叫UI設(shè)計(jì)。

那行業(yè)細(xì)分一般分為4種行業(yè)

移動(dòng)端UI設(shè)計(jì)師————手機(jī)平板上的APP設(shè)計(jì)和主題設(shè)計(jì)，目前主流的UI設(shè)計(jì)，因?yàn)槟壳耙苿?dòng)互聯(lián)網(wǎng)的快速發(fā)展，很多公司主要以手機(jī)APP為主，所以學(xué)習(xí)主要也是先從移動(dòng)端入手學(xué)習(xí)。

PC端UI設(shè)計(jì)師————電腦上的軟件和網(wǎng)頁按鈕設(shè)計(jì)，PC端UI設(shè)計(jì)師主要以電腦軟件界面設(shè)計(jì)為主，就目前而言大多數(shù)網(wǎng)民主要是使用的還是移動(dòng)端居多。

游戲UI設(shè)計(jì)師————網(wǎng)游和手游上的界面等設(shè)計(jì)，目前來說這個(gè)是比較難的，因?yàn)槟壳皝碚f中國的游戲市場(chǎng)主要以騰訊，網(wǎng)易兩家公司壟斷，而且公司對(duì)游戲UI設(shè)計(jì)師的要求也特別高，學(xué)歷，經(jīng)驗(yàn)，是否科班出身都有嚴(yán)格的限制，但是要求高回報(bào)也會(huì)更高，游戲UI設(shè)計(jì)師是目前UI設(shè)計(jì)師里面工資最高的。

其他端UI設(shè)計(jì)師————AR,VR，銀行取款機(jī)界面，自助取票機(jī)，智能手表的界面等，這類UI設(shè)計(jì)目前還是來說還沒有完全普及，大家可以進(jìn)入U(xiǎn)I行業(yè)后，慢慢學(xué)習(xí)了解其他端的UI界面設(shè)計(jì)。

二、ui設(shè)計(jì)理念怎么寫

任何界面，只要有信息就存在層級(jí)和主次。我認(rèn)為這比考慮用什么色彩，什么風(fēng)格，什么表現(xiàn)手法更為優(yōu)先?？梢詮男畔⒌纳?、大小，留白空間這些方面來考慮。但各層級(jí)的關(guān)系一定要有清晰的對(duì)比。當(dāng)你處理這些，即使一個(gè)界面沒有什么設(shè)計(jì)也會(huì)看起來非常舒服。

愉悅感。這是我認(rèn)為在產(chǎn)品設(shè)計(jì)過程中非常重要的一個(gè)因素，它比滿足感處于更高的層級(jí)。因?yàn)樗粌H滿足了用戶的基本訴求，同時(shí)讓用戶感到了快樂，甚至在關(guān)閉產(chǎn)品的瞬間有一絲的回味。它是優(yōu)秀的交互、視覺、動(dòng)態(tài)各方面綜合的結(jié)果。當(dāng)然，在實(shí)際工作中要達(dá)到這樣的高度確實(shí)非常有難度，但是在你分內(nèi)的工作中請(qǐng)盡量記住這點(diǎn)。讓本身枯燥的內(nèi)容變得更有趣一些，請(qǐng)想盡辦法的努力去愉悅用戶吧～～

三、手機(jī)UI設(shè)計(jì)的基本規(guī)范

大家都知道手機(jī)采用的：一個(gè)是蘋果的iOS系統(tǒng)，另一個(gè)就是谷歌公司的安卓系統(tǒng)。華為的鴻蒙系統(tǒng)雖然早就上線，但是還沒有真正運(yùn)用在手機(jī)移動(dòng)端上，小阿在這里期待著，希望有一天也能寫“華為‘鴻蒙系統(tǒng)’的界面尺寸規(guī)范?！?span style="display:none">ku7創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計(jì)、營銷策劃公司

這兩者之間有一個(gè)明顯的區(qū)別就是iOS系統(tǒng)是非開源的，簡單來說就是不能別隨意改動(dòng)的，連圖標(biāo)都是必須帶圓角的，對(duì)交互設(shè)計(jì)師很友好的。

而安卓系統(tǒng)就是開源的，界面可以隨意改動(dòng)，尺寸也沒有特別的規(guī)范，圖標(biāo)、尺寸成千上萬種，根據(jù)手機(jī)品牌不同，形狀也不同，對(duì)于交互設(shè)計(jì)稍微有那么些許不友好。

那我們就來看看安卓和iOS的具體有哪些界面規(guī)范。

一、iOS界面規(guī)范

首先蘋果分為兩種尺寸，一種是中碼比如6s、7、8等，這種我們一般切圖命名為@2X。還有一種就是Plus版本，這種一般切圖命名為@3X。

蘋果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。兩者之間的關(guān)系就是1.5倍，怎么說呢，就是6s之類的手機(jī)想要變成Plus，我們?cè)O(shè)計(jì)師稍微想要偷懶一下設(shè)計(jì)，只需要整體擴(kuò)大1.5倍，比如圖標(biāo)。

來分析一下界面的尺寸規(guī)范：

首先是狀態(tài)欄，就是信號(hào)電池欄的高度為40px。導(dǎo)航欄部分，就是“設(shè)置”欄高度為88px。

而下邊的底部欄（導(dǎo)航欄）高度則為98px。

注意這三種尺寸是規(guī)定比較死的。我們做開發(fā)遇到Plus版把以上尺寸等比例擴(kuò)大1.5倍就可以了。剩下的中間空白部分，我們就可以任意填充內(nèi)容，Banner或者圖標(biāo)？

☆ 關(guān)于圖標(biāo)部分

蘋果的圖標(biāo)極具有美感，完全符合柵格黃金比例，所以看起來十分協(xié)調(diào)。因?yàn)槎际鞘褂玫木W(wǎng)格進(jìn)行規(guī)范化設(shè)計(jì)，所以一整套圖標(biāo)都保持著高統(tǒng)一性。

整個(gè)點(diǎn)擊圖標(biāo)最小不能小于44px，一般大小為58px，圓角為12px,但是我們習(xí)慣取為整數(shù)60px,就會(huì)非常的標(biāo)準(zhǔn)。為什么一定有最小的控制呢？因?yàn)槲覀兪种赣幸粋€(gè)觸碰面呀~低于上述的寬度，就可能碰不到。一定要非常注意用戶的使用感受哦。

☆ 關(guān)于分割線部分

注意分割線不是一條線，是一個(gè)寬度為1px的矩形，而且顏色多為灰色。

☆ 關(guān)于板塊與板塊之間

板塊與板塊之間的灰色條間隔是30-70之間，一般來說取整數(shù)。iOS系統(tǒng)采取了70 px,有利于減輕用戶的閱讀負(fù)擔(dān)。列表的高度一般高于88 px，列表與列表之間的距離是10px-30px,太小會(huì)有碰撞。作為UI設(shè)計(jì)師，這一點(diǎn)是要考慮的是吧？

☆ 關(guān)于列表中的尺寸規(guī)范以及字體要求

☆ 關(guān)于左右間隔的安全區(qū)域

這個(gè)安全區(qū)域又稱之為留白邊距，iOS的原生態(tài)頁面【設(shè)置】頁面的邊距是30px,根據(jù)不同產(chǎn)品有不同的調(diào)整，寬度一般在16px--30px浮動(dòng)，最大的特點(diǎn)就是數(shù)值全是偶數(shù)。

☆ 關(guān)于切換按鈕的尺寸

☆ 關(guān)于字體

iOS系統(tǒng)的字體是蘋方字體，字體的顏色和粗細(xì)也大有講究，標(biāo)題等文字就是粗體，一些說明文字等就是淺色非加粗體。常常用文字的粗細(xì)體來區(qū)分重要信息和次要信息，進(jìn)行信息層級(jí)的劃分。字體顏色很少采用純黑色，一般用的是深灰色和淺灰色。

主標(biāo)題的字體大小設(shè)置一般是32-36左右，加粗居中。列表中的文字就要小一些，字體大小為30，不會(huì)加粗。輔助性字體大小一般24-26。說明文字一般不會(huì)小于22，最小設(shè)置為20，再小就看不到啦。另外需要注意的一點(diǎn)是所有的字號(hào)設(shè)置都必須為偶數(shù)，上下級(jí)內(nèi)容字號(hào)極差關(guān)系為2-4號(hào)。

關(guān)于蘋果界面的小部分尺寸規(guī)范就介紹到這里，下期再做安卓界面的尺寸介紹。

作為UI設(shè)計(jì)師，一定要具體掌握界面的大小尺寸來適應(yīng)美學(xué)觀點(diǎn)，讓人感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)極快吸引用戶的注意力。

二、安卓界面規(guī)范

眾所周知，安卓系統(tǒng)是開源的，國內(nèi)又有超多的手機(jī)廠商，小米、魅族、華為、oppo、三星等，每一個(gè)品牌有屬于自己的UI設(shè)計(jì)規(guī)范，但是我們主要分析UI界面尺寸規(guī)范。

1、字體

安卓系統(tǒng)中文采用的是思源黑體，英文字體為robot字體。

只使用偶數(shù)單位 24 pt，28 pt，36 pt等字體大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

講圖標(biāo)之前先來分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次數(shù)值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系統(tǒng)專用的長度單位，設(shè)備獨(dú)立像素的意思。不同設(shè)備有不同的顯示效果,這個(gè)和設(shè)備硬件有關(guān)。多為圖標(biāo)使用，文字則用sp(放大像素)，主要用于字體顯示best for textsize。

px是像素的意思，不同設(shè)備顯示效果相同。

安卓各屏幕密度關(guān)系如下：

3、圖標(biāo)

不同手機(jī)品牌的圖標(biāo)的標(biāo)志是不一樣的，對(duì)應(yīng)不同大小屏幕的尺寸如下：

系統(tǒng)圖標(biāo)的尺寸：

快捷圖標(biāo)的尺寸：

應(yīng)用圖標(biāo)的尺寸：

4、應(yīng)用欄的尺寸

從左到右依次是：① 應(yīng)用欄高度：56dp；應(yīng)用欄左右內(nèi)邊距為16dp；應(yīng)用欄圖標(biāo)上下左內(nèi)邊距為16dp；應(yīng)用欄標(biāo)題左內(nèi)邊距為72dp；應(yīng)用欄標(biāo)題下邊距：20dp；

②應(yīng)用欄高度為128dp；

③操作欄高度為56dp；標(biāo)題欄高度：80dp；標(biāo)題欄底部內(nèi)邊距：8dp；描述區(qū)域高度：72dp；描述區(qū)底部內(nèi)邊距：16dp。

5、列表高度

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

垂直邊距

①狀態(tài)欄：24dp；②工具欄：56dp；③子標(biāo)題：48dp；④列表項(xiàng)：72dp

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

垂直邊距

①狀態(tài)欄：24dp；②工具欄：56dp；③標(biāo)題和列表項(xiàng)：48dp；④子標(biāo)題：48dp；⑤內(nèi)容區(qū)域間距離為8dp

6、切圖

上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關(guān)系，而xhdpi的Android手機(jī)屏幕與xxdpi的屏幕剛好是1.5倍的關(guān)系，所以iPhone 6 Plus和xxhdip也可以共用一套切圖，掌握好尺寸關(guān)系，能讓工作變得簡單很多。

7、界面適配

安卓多屏幕支持的基礎(chǔ)是它能夠管理應(yīng)用程序的布局和位圖可繪制對(duì)象的渲染以適當(dāng)?shù)姆绞綄?duì)當(dāng)前屏幕配置的能力。該系統(tǒng)處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放位圖可繪制在屏幕密度正確呈現(xiàn)您的應(yīng)用程序在每個(gè)屏幕的配置，來優(yōu)化用戶界面設(shè)計(jì)，帶來更良好的用戶體驗(yàn)。

如何做到安卓界面適配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的關(guān)系；明白實(shí)際密度和系統(tǒng)密度的關(guān)系，dp、sp、px的區(qū)別；明白dp與px的轉(zhuǎn)換。這里不做過多闡述，后期寫一篇具體的~

安卓的界面規(guī)范就講到這里，要明白設(shè)計(jì)界面規(guī)范的意義是確保設(shè)計(jì)的統(tǒng)一性與合理性，規(guī)范維護(hù)的是項(xiàng)目的統(tǒng)一，為了項(xiàng)目利益最大化，高效化。所以作為UI設(shè)計(jì)師的我們，如果一點(diǎn)設(shè)計(jì)規(guī)范不遵守，全靠自己想當(dāng)然，那就別發(fā)給前端人員啦，他也看不懂。

所以作為UI設(shè)計(jì)，必須要要遵守設(shè)計(jì)規(guī)范，這樣才能做到設(shè)計(jì)有道可尋，希望以上回答對(duì)你了解手機(jī)界面設(shè)計(jì)規(guī)范有所幫助。

四、ui設(shè)計(jì)是什么 Ui設(shè)計(jì)指的是什么

UI 設(shè)計(jì)(或稱界面設(shè)計(jì))是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，也叫界面設(shè)計(jì)。UI 設(shè)計(jì)分為實(shí)體 UI 和虛擬UI，互聯(lián)網(wǎng)說的 UI 設(shè)計(jì)是虛擬 UI, UI 即User Interface(用戶界面)的簡稱。

UI 設(shè)計(jì)師的職能大體包括三方面:一是圖形設(shè)計(jì)，軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。三是用戶測(cè)試/研究，這里所謂的“測(cè)試”，其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性，主要通過以目標(biāo)用戶問卷的形式衡量 UI 設(shè)計(jì)的合理性。

UI設(shè)計(jì)目前的前景還是很不錯(cuò)的，很多企業(yè)都缺少 UI設(shè)計(jì)師。而且可以看到的是，現(xiàn)在社會(huì)的發(fā)展，更多的智能機(jī)和智能機(jī)器人研發(fā)出現(xiàn)，這些都離不開UI 設(shè)計(jì)師。所以說 UI 設(shè)計(jì)的是很有前途的，是不會(huì)失業(yè)的。而且 UI 設(shè)計(jì)門檻不高，要入門也不難的。

從工作內(nèi)容來說，UI 設(shè)計(jì)在當(dāng)前的互聯(lián)網(wǎng)領(lǐng)域、科技領(lǐng)域可以說無處不在，

好的 UI 設(shè)計(jì)能夠明顯提升用戶的使用體驗(yàn),從而給產(chǎn)品帶來更多的附加值,所以UI 設(shè)計(jì)對(duì)于互聯(lián)網(wǎng)產(chǎn)品是非常重要的。目前 UT 設(shè)計(jì)通常分為兩個(gè)大的工作方向，一個(gè)是交互設(shè)計(jì),另一個(gè)是視覺設(shè)計(jì)。

總的來說，UI 設(shè)計(jì)相比較于編程而言，還是非常適合大眾學(xué)的并且就業(yè)前景很廣闊。學(xué)完 UI 設(shè)計(jì)，能獲得一份穩(wěn)定而又不失樂趣的工作，同時(shí)有利于追求更高品質(zhì)的生活，在藝術(shù)領(lǐng)域可以獲得更多的啟迪。

以上就是關(guān)于Ui手機(jī)主題設(shè)計(jì)理念相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。