正文

身邊常見(jiàn)的ui設(shè)計(jì)（身邊常見(jiàn)的ui設(shè)計(jì)有哪些）

發(fā)布時(shí)間：2023-07-01 00:50:40 稿源：創(chuàng)意嶺閱讀： 1492

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于身邊常見(jiàn)的ui設(shè)計(jì)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

本文目錄:

1、一般ui設(shè)計(jì)使用的設(shè)計(jì)工具有哪些
2、UI設(shè)計(jì)具體包含哪些
3、ui設(shè)計(jì)構(gòu)圖的主要形式有哪些?
4、UI設(shè)計(jì)不得不知的設(shè)計(jì)規(guī)范，你知道幾條

一、一般ui設(shè)計(jì)使用的設(shè)計(jì)工具有哪些

UI設(shè)計(jì)軟件主要有Pixso、Figma、Sketch、AdobeXD等。

Pixso：全平臺(tái)覆蓋、精細(xì)化矢量設(shè)計(jì)、智能化布局、團(tuán)隊(duì)組件樣式共享、社區(qū)和資源庫(kù)、多人實(shí)時(shí)協(xié)作、高保真原型交互動(dòng)畫(huà)、成果一鍵交付、用戶問(wèn)題實(shí)時(shí)反饋、中文語(yǔ)言環(huán)境、本土設(shè)計(jì)系統(tǒng)、數(shù)據(jù)私有化。

Figma：全平臺(tái)覆蓋、精細(xì)化矢量設(shè)計(jì)、智能化布局、團(tuán)隊(duì)組件樣式共享、社區(qū)和資源庫(kù)僅社區(qū)、多人實(shí)時(shí)協(xié)作、高保真原型交互動(dòng)畫(huà)、成果一鍵交付。

Sketch：平臺(tái)覆蓋MacOS、傳統(tǒng)鋼筆工具、多人實(shí)時(shí)協(xié)作、交互動(dòng)畫(huà)簡(jiǎn)單的點(diǎn)擊式原型、成果借助第三方工具交付。

AdobeXD：平臺(tái)覆蓋MacOS、Windows、傳統(tǒng)鋼筆工具、多人實(shí)時(shí)協(xié)作、成果需借助第三方工具交付。

相對(duì)比其他產(chǎn)品Pixso的功能更加全面，操作便捷，在Pixso完全可以多人云端協(xié)作設(shè)計(jì)，實(shí)時(shí)同步字號(hào)、邊框、顏色等各種細(xì)節(jié)。并且可以創(chuàng)建一個(gè)組件，在任何地方重復(fù)使用它，當(dāng)主組件樣式更新，所有組件將自動(dòng)同步發(fā)生改變。

想要了解更多關(guān)于UI設(shè)計(jì)軟件的相關(guān)信息，推薦選擇Pixso協(xié)同設(shè)計(jì)。該工具無(wú)縫銜接以往工作，支持Sketch、XD、SVG等文件導(dǎo)入導(dǎo)出，自由進(jìn)行Sketch的文件格式轉(zhuǎn)換。并且，文件自動(dòng)保存到云端，一鍵回溯到任意歷史版本，再也不用擔(dān)心文件丟失。素材庫(kù)集成眾多大廠優(yōu)秀的設(shè)計(jì)系統(tǒng)，所有UI設(shè)計(jì)師均可直接拖拽復(fù)用，從此省去大量模塊化設(shè)計(jì)環(huán)節(jié)的重復(fù)勞動(dòng)。

二、UI設(shè)計(jì)具體包含哪些

1、研究界面

國(guó)內(nèi)大部分UI工作者都是從事這個(gè)行業(yè)，是了解軟件產(chǎn)品、致力于提高軟件用戶體驗(yàn)的產(chǎn)品外形設(shè)計(jì)師。

這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，信息多媒體設(shè)計(jì)等。

2、人與界面

交互設(shè)計(jì)師interaction designer在圖形界面產(chǎn)生之前，長(zhǎng)期以來(lái)UI設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，樹(shù)狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。

一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般都是軟件工程師背景居多，也有視覺(jué)設(shè)計(jì)師轉(zhuǎn)行進(jìn)入的。

3、研究人

任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然UI設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒(méi)有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。

擴(kuò)展資料

UI設(shè)計(jì)的原則：

1、簡(jiǎn)易性

界面的簡(jiǎn)潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯(cuò)誤選擇的可能性。

2、用戶語(yǔ)言

界面中要使用能反映用戶本身的語(yǔ)言，而不是游戲設(shè)計(jì)者的語(yǔ)言。

3、記憶負(fù)擔(dān)最小化

人腦不是電腦，在設(shè)計(jì)界面時(shí)必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定，24小時(shí)內(nèi)存在約25%的遺忘率。所以對(duì)用戶來(lái)說(shuō)，瀏覽信息要比記憶更容易。

4、一致性

它是每一個(gè)優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。

參考資料來(lái)源：百度百科-UI設(shè)計(jì)

三、ui設(shè)計(jì)構(gòu)圖的主要形式有哪些?

其實(shí)ui設(shè)計(jì)構(gòu)圖法與繪畫(huà)構(gòu)圖有相似之處，甚至有一些方面是能夠互相模仿的，但又不可以徹底替代，每一種藝術(shù)流派常有它與眾不同的規(guī)律性和基本原理，它是不可以違反的，那么ui設(shè)計(jì)構(gòu)圖的主要形式有哪些?接下來(lái)就給大家進(jìn)行一下具體的介紹。

1、十字形構(gòu)圖法

十字形構(gòu)圖法就是說(shuō)把界面分為四分，也就是說(shuō)根據(jù)界面管理中心畫(huà)橫縱兩道，管理中心交接點(diǎn)是放置行為主體部位的，此類構(gòu)圖法，使界面提升歸屬感、友誼感和端莊及新鮮感，也存有著死板等不利條件，但適合主要表現(xiàn)對(duì)稱性式構(gòu)圖法，也可造成管理中心透視實(shí)際效果。

2、九宮格構(gòu)圖

九宮格構(gòu)圖有的也稱井字構(gòu)圖法，事實(shí)上歸屬于黃金比例式的一種方式。就是說(shuō)把界面均值分為九塊，在管理中心塊上四個(gè)角的點(diǎn)，用隨意一點(diǎn)的部位來(lái)分配行為主體部位。事實(shí)上這好多個(gè)點(diǎn)都合乎“黃金比例基本定律”，是最好的部位，自然還應(yīng)考慮到均衡、比照等要素。這類構(gòu)圖法能展現(xiàn)轉(zhuǎn)變與炫酷，界面頗具魅力。

3、三角形構(gòu)圖

三角形構(gòu)圖，在界面中常表述的行為主體放到三角形中或原素自身產(chǎn)生三角形的趨勢(shì)，此構(gòu)圖法是視覺(jué)磁感應(yīng)方法，若有形狀產(chǎn)生的也是黑影產(chǎn)生的三角形狀。假如是當(dāng)然產(chǎn)生的線型構(gòu)造，這時(shí)候能夠

把行為主體分配在三角形圓弧管理中心部位上，以圖取得進(jìn)步。三角形構(gòu)圖，造成穩(wěn)定感，顛倒則不平穩(wěn)。

4、S字型構(gòu)圖法

S字型構(gòu)圖法，在界面中幽美感獲得了充足的充分發(fā)揮，這最先反映在曲線圖的藝術(shù)美。S字型構(gòu)圖法炫酷實(shí)際效果強(qiáng)，即動(dòng)且穩(wěn)，可通用性于各種各樣幅寬的界面，這依據(jù)主題的目標(biāo)來(lái)挑選。S字型構(gòu)圖法在一般的狀況下，都是以界面的左下方向右上方拓寬。

5、三分法構(gòu)圖

三分法構(gòu)圖就是指把界面橫分三份，每一分管理中心都可以置放行為主體形狀，這類構(gòu)圖法適合多形狀平行面聚焦的行為主體，可主要表現(xiàn)大容量、小對(duì)象，也可反方向挑選。這類界面構(gòu)圖法，主要表現(xiàn)獨(dú)特，構(gòu)圖法簡(jiǎn)潔。

以上就是ui設(shè)計(jì)構(gòu)圖的主要形式，在進(jìn)行UI設(shè)計(jì)的時(shí)候，大家可以借鑒生活中的一些現(xiàn)象尋找靈感，找到適合觀眾審美需求的事物，并進(jìn)行有效的利用，設(shè)計(jì)出符合大眾審美的作品。

四、UI設(shè)計(jì)不得不知的設(shè)計(jì)規(guī)范，你知道幾條

一、軸軸在UI設(shè)計(jì)中是最基本、最常見(jiàn)的概念，也是用來(lái)組織界面結(jié)構(gòu)的重要核心。簡(jiǎn)單說(shuō)來(lái)，軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線，在下面的設(shè)計(jì)圖中，軸以虛線的方式被標(biāo)注出來(lái)。1、軸最常見(jiàn)于對(duì)稱元素的使用，當(dāng)元素被布置成軸對(duì)稱的布局的時(shí)候，會(huì)給人有序感。

就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺(jué)平穩(wěn)、舒適、平易近人。最簡(jiǎn)單的一個(gè)例子就是iTunes 程序中的專輯列表的設(shè)計(jì)，所有的專輯列表在界面的左側(cè)保持對(duì)齊，圍繞虛線軸軸對(duì)稱。2、強(qiáng)化雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊，這跳線會(huì)在視覺(jué)中變得更加“明顯”的。

最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒(méi)有，那么這種軸線的感覺(jué)不會(huì)那么強(qiáng)烈。從產(chǎn)品設(shè)計(jì)的角度上來(lái)看，Twitter 的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺(jué)。3、運(yùn)動(dòng)當(dāng)我們碰到某先線條的時(shí)候，視覺(jué)會(huì)很自然地沿著這些方向運(yùn)動(dòng)，就如同我們站在街上，會(huì)自覺(jué)地沿著街道的兩頭走動(dòng)。

兩個(gè)端點(diǎn)決定了線，界定了開(kāi)始和結(jié)束的地方，線，或者說(shuō)軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。SoundCloud中，音軌沿著一條既定的水平軸線運(yùn)動(dòng)，隨著音樂(lè)的播放，音軌自然地自左向右勻速運(yùn)動(dòng)。4、連續(xù)性如果終點(diǎn)是不確定的，那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng)，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。

在建筑學(xué)中，未清楚界定的終點(diǎn)非常少見(jiàn)，因?yàn)榻ㄖ男藿ㄍǔ](méi)法永遠(yuǎn)持續(xù)下去，但是UI設(shè)計(jì)則不一樣，無(wú)限地滾動(dòng)下去是無(wú)比受歡迎的設(shè)計(jì)手法。Pinterest的APP中就是這樣做的，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動(dòng)下去，只要你有興趣一直觀看下去。

二、對(duì)稱當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí)，它們就形成了完美對(duì)稱。1、平衡對(duì)稱令整個(gè)設(shè)計(jì)更加平衡。當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適，這是平衡給人的感受。

Rdio的APP設(shè)計(jì)就遵循著這樣的設(shè)計(jì)規(guī)則，屏幕兩側(cè)的控件是相同的規(guī)格，這類布局很適宜閱讀，用戶會(huì)自覺(jué)地自上到下，從左向右查看。2、不對(duì)稱如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近，那就是不對(duì)稱的設(shè)計(jì)。不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感，可能會(huì)令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。

雖然Pinteret 的APP設(shè)計(jì)在整體上是沿著中軸線對(duì)稱的(寬度一致)，但是兩邊的界面控件并非是對(duì)稱的，它們的高度并不一致，位置也是錯(cuò)落的。稍微一點(diǎn)的落差都會(huì)被眼睛捕捉到，而這樣的差異讓用戶無(wú)法準(zhǔn)確地左右順序閱讀。不對(duì)稱設(shè)計(jì)打破了設(shè)計(jì)的平衡性和舒適性，但是也可以緩解了規(guī)律性設(shè)計(jì)帶來(lái)的視覺(jué)疲勞。

三、層級(jí)當(dāng)某個(gè)元素出現(xiàn)在比其他元素更重要的位置的時(shí)候，層級(jí)就出現(xiàn)了。1、尺寸如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大，就會(huì)區(qū)分出層級(jí)。毫無(wú)疑問(wèn)，我們查看某個(gè)設(shè)計(jì)的時(shí)候，通常會(huì)被最大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶，其中一個(gè)是其他四個(gè)的兩倍大，我們的注意力自然而然會(huì)被吸引過(guò)去。

通過(guò)尺寸來(lái)區(qū)分文章列表層級(jí)的典型就是稍后讀應(yīng)用Pocket。頂部的輪播文章?lián)碛懈蟮膱D片，它的位置和尺寸會(huì)令我們一眼注意到。2、形狀如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣，也可以讓它獨(dú)立出一個(gè)層級(jí)。不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目。建筑物的正面擁有五個(gè)相同的窗戶和一閃大門，你會(huì)立刻注意到門的獨(dú)特之處。

在Instagram的個(gè)人信息頁(yè)中，圓形的個(gè)人頭像在方形的圖片中別具一格，非常抓人眼球。它會(huì)讓人意識(shí)到，這個(gè)獨(dú)特的東西，更為重要。3、位置位置的存在同樣能彰顯層級(jí)的不一樣。在圓圈之內(nèi)，中心位置的東西比邊緣部分的看起來(lái)更重要。位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。

以設(shè)計(jì)應(yīng)用Path的設(shè)計(jì)為例，時(shí)間軸頂點(diǎn)處的用戶頭像就明顯比時(shí)間軸上的其他部分更重要，而這個(gè)地方正好展示的也是用戶頭像。四、韻律UI設(shè)計(jì)和建筑設(shè)計(jì)同樣有著韻律之美，重復(fù)的模式會(huì)營(yíng)造出獨(dú)特的節(jié)奏之美。1、模式理解韻律最直接的方式就是聽(tīng)歌。音樂(lè)擁有節(jié)奏感，絕大多數(shù)的音樂(lè)遵循著相同的節(jié)拍，節(jié)拍就是音樂(lè)模式的一部分。

這方面最典型的APP是Airbnb，APP列表中每一間房子都占據(jù)一個(gè)模塊，模塊中有著大小相同的圖片，價(jià)格、位置和房東信息和圖片的相對(duì)位置一定，且排版勻稱舒服，兩個(gè)模塊之間的間距也相同，當(dāng)你瀏覽的時(shí)候，熟悉的節(jié)奏會(huì)讓你清楚地知道上哪看關(guān)鍵信息。

2、間斷當(dāng)節(jié)奏被間隔打斷的時(shí)候，會(huì)形成不同的層級(jí)。聽(tīng)歌的時(shí)候，均勻的節(jié)奏被其他的音樂(lè)元素打斷的時(shí)候，你會(huì)意識(shí)到這是比較特別的部分。在Twitter的APP中，推文和推文保持著相同的樣式，均勻的節(jié)奏，但是其中的“推薦用戶”一項(xiàng)有著不同的樣式，它插入到推文列表中，打破了整個(gè)信息流的節(jié)奏，凸顯出不同的層級(jí)，會(huì)很快抓住你的注意力。

#####首先說(shuō)現(xiàn)象，大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會(huì)聽(tīng)到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說(shuō)中的2K屏。近年來(lái)iPhone的碎片化也加劇了：640×960, 640×1136, 750×1334, 1242×2208。

不要被這些尺寸嚇倒。實(shí)際上大部分的app UI設(shè)計(jì)和移動(dòng)端網(wǎng)頁(yè)，在各種尺寸的屏幕上都能正常顯示。說(shuō)明尺寸的問(wèn)題一定有解決方法，而且有規(guī)律可循。

3、使用第三方，比如藍(lán)湖

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