正文

界面設(shè)計(jì)圖片（app界面設(shè)計(jì)）

發(fā)布時(shí)間：2023-07-02 03:20:18 稿源：創(chuàng)意嶺閱讀： 827

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

本文目錄:

1、UI 設(shè)計(jì)用什么軟件?
2、ui設(shè)計(jì)整個(gè)過程一般分為哪些步驟？
3、UI設(shè)計(jì)需要學(xué)習(xí)哪些軟件??？
4、UI界面設(shè)計(jì)規(guī)范有哪些？

一、UI 設(shè)計(jì)用什么軟件?

1、PS 全稱 Photoshop

UI設(shè)計(jì)用的最多的軟件，90%以上的UI設(shè)計(jì)師都是要會(huì)PS的，其處理圖片功能非常強(qiáng)大，調(diào)色方面也不錯(cuò)，還有圖層樣式，布爾運(yùn)算方面都是UI設(shè)計(jì)必備的。不過也有劣勢(shì)，就是無法繪制矢量圖形，排版也不是很好。還有圖層也有點(diǎn)多。管理起來不是很方便。在UI設(shè)計(jì)中主要的用途是用來繪制界面和圖標(biāo)。

2、AI 全稱 Illustrator

一款矢量繪圖軟件，在做UI圖標(biāo)上非常不錯(cuò)。特別是繪制扁平化圖標(biāo)這塊。很好用。也有矢量功能畫出來的圖形可以放大縮小。劣勢(shì)就是不能調(diào)色。做擬物化圖標(biāo)也不是很好做。

3、AE 全稱 After Effects

主要是做來做影視后期視頻特效的，但是在UI這個(gè)的話就是用來做一些UI的交互動(dòng)效。動(dòng)效這塊是效率最高的軟件，不過不能用AE畫圖標(biāo)做界面。這個(gè)AE不擅長(zhǎng)。

4、ARP 全稱 Axure RP Pro

主是要用來做原型圖。

相關(guān)信息：

UI的高級(jí)形態(tài)可以理解為User Invisible。對(duì)用戶而言，在這一層面UI是“不可見的”，這并非是指視覺上的不可見，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在。

這需要更多地研究用戶心理和用戶行為，從用戶的角度來進(jìn)行界面結(jié)構(gòu)、行為、視覺等層面的設(shè)計(jì)。大數(shù)據(jù)的背景下，在信息空間中，交互會(huì)變得更加自由、自然并無處不在，科學(xué)技術(shù)、設(shè)計(jì)理念及多通道界面的發(fā)展，直至普適計(jì)算界面的出現(xiàn)，用戶體驗(yàn)到的交互是下意識(shí)甚至是無意識(shí)的。

二、ui設(shè)計(jì)整個(gè)過程一般分為哪些步驟？

1. Storyboard 故事版：

主要負(fù)責(zé)人：產(chǎn)品經(jīng)理或交互設(shè)計(jì)師

最早大家開始討論用戶體驗(yàn)流程，在白板上邊畫流程邊添加粗略的UI元素。會(huì)后交互設(shè)計(jì)師會(huì)在在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師、包括技術(shù)工程師會(huì)一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便并易于修改的。

此環(huán)節(jié)要敲定userflow，用戶流程及其中的關(guān)鍵步驟，每一步驟都是一個(gè)主要界面。

*白板上一般都是這樣，交互設(shè)計(jì)同學(xué)會(huì)在紙上重繪。

&amp;amp;lt;img src="https://pic4.zhimg.com/5b5007aa23668ae60f26e87b5e807453_b.jpg" data-rawwidth="360" data-rawheight="240" class="content_image" width="360"/&amp;amp;gt;

*移動(dòng)產(chǎn)品設(shè)計(jì)這樣做也行，不買專用的模板本和工具尺，自己打印也行。

&amp;amp;lt;img src="https://pic3.zhimg.com/e0816d618c789316adbd90e091f7cebe_b.jpg" data-rawwidth="400" data-rawheight="300" class="content_image" width="400"/&amp;amp;gt;

2. Key wireframe 關(guān)鍵界面線框圖

主要負(fù)責(zé)人：交互設(shè)計(jì)師

在確定的用戶流程中，選出幾個(gè)關(guān)鍵的，有代表性的步驟，做細(xì)化的wireframe線框圖。線框圖里要確保每一個(gè)UI元素的設(shè)計(jì)，包括其大小和位置。我們做的線框圖是1:1的，也就是線框圖與實(shí)際界面尺寸一致。1:1的線框圖能在前期避免考慮不周和執(zhí)行困難等很多問題的出現(xiàn)。

此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局，以及全局的布局排版風(fēng)格。

*線框圖做成1:1最好。輸出到文檔里要添加說明。在后面的工作里，這份文檔可以讓UI設(shè)計(jì)同學(xué)和工程師同學(xué)共用。

&amp;amp;lt;img src="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_b.jpg" data-rawwidth="439" data-rawheight="280" class="origin_image zh-lightbox-thumb" width="439" data-original="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_r.jpg"/&amp;amp;gt;

3. Key visual design 關(guān)鍵界面視覺設(shè)計(jì)

主要負(fù)責(zé)人：UI設(shè)計(jì)師

此環(huán)節(jié)交互設(shè)計(jì)師會(huì)按確定的用戶流程及確定的布局風(fēng)格來繼續(xù)做其它界面的線框圖。UI設(shè)計(jì)師則同時(shí)開始做關(guān)鍵界面的視覺設(shè)計(jì)，進(jìn)行配色、樣式不同風(fēng)格的嘗試。

此環(huán)節(jié)要確定產(chǎn)品界面的視覺設(shè)計(jì)風(fēng)格。

4. All wireframe 全部界面線框圖

主要負(fù)責(zé)人：交互設(shè)計(jì)師

此環(huán)節(jié)交互設(shè)計(jì)師要完成全部界面的線框圖（1:1的）設(shè)計(jì)并且團(tuán)隊(duì)確認(rèn)。

*做完全部的線框圖，一般會(huì)出一個(gè)總結(jié)構(gòu)圖。如果有足夠大的場(chǎng)地，也可以逐頁(yè)打印出來貼到一面墻上。方便團(tuán)隊(duì)隨時(shí)參考。

&amp;amp;lt;img src="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_b.jpg" data-rawwidth="599" data-rawheight="371" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_r.jpg"/&amp;amp;gt;5. Prototype 可動(dòng)原型

主要負(fù)責(zé)人：交互設(shè)計(jì)師

此環(huán)節(jié)依產(chǎn)品需求而定。如果靜態(tài)的線框圖還不能完整的體現(xiàn)出產(chǎn)品特點(diǎn)，那就需要做成可操作甚至有關(guān)鍵界面動(dòng)畫示意的可動(dòng)原型。通常是HTML的可動(dòng)原型，特殊項(xiàng)目也曾經(jīng)做過Flash的。我還有一個(gè)奇葩朋友用PPT做過（PPT的開發(fā)工具+VB Script）幾乎接近成品界面的可動(dòng)原型。

此環(huán)節(jié)的確認(rèn)同上一步，團(tuán)隊(duì)的理解會(huì)更精準(zhǔn)。

*忍不住帖一個(gè)PPT的開發(fā)工具面板，提供VS風(fēng)格的控件，并且直接用VB script寫控件邏輯！還可以帶dummy數(shù)據(jù)！客戶都以為你開發(fā)完畢了有木有。

&amp;amp;lt;img src="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_b.jpg" data-rawwidth="596" data-rawheight="117" class="origin_image zh-lightbox-thumb" width="596" data-original="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_r.jpg"/&amp;amp;gt;

6. UI design 全部界面視覺設(shè)計(jì)

主要負(fù)責(zé)人：UI設(shè)計(jì)師

完成全部界面的UI視覺設(shè)計(jì)。

此環(huán)節(jié)確認(rèn)全部UI設(shè)計(jì)。同時(shí)把確認(rèn)的UI更新到文檔里。

三、UI設(shè)計(jì)需要學(xué)習(xí)哪些軟件??？

首先第一個(gè)是PS，它主要是用來做界面設(shè)計(jì)、圖片處理的，它的功能強(qiáng)大，在諸多設(shè)計(jì)崗中的應(yīng)用都特別廣泛，許多人以“不可獲缺”來形容ps。然后是ai，即Illustrator，是一款矢量圖處理軟件，在ui設(shè)計(jì)中非常適合用于處理一些及其復(fù)雜的圖形路徑，而且這款軟件有一個(gè)非常大的特點(diǎn)就是可以和ps進(jìn)行結(jié)合使用，具體就是設(shè)計(jì)師在制作圖表的時(shí)候可以在ai完成，之后再鏈接嵌入到ps當(dāng)中!千鋒教育根據(jù)不同階段，安排不同專業(yè)老師進(jìn)行傳道授業(yè)解惑，講課內(nèi)容嚴(yán)格按照最新就業(yè)知識(shí)點(diǎn)來進(jìn)行。。

Adobe After Effects，簡(jiǎn)稱“AE”，是Adobe公司推出的一款圖形視頻處理軟件。在UI設(shè)計(jì)中起的作用主要是用來做交互動(dòng)效。而Sketch

應(yīng)該是UI設(shè)計(jì)師最常用也是市場(chǎng)占用率最大的UI專用設(shè)計(jì)軟件了，功能強(qiáng)大、操作簡(jiǎn)單、體驗(yàn)感流暢，各方面都比較完善。千鋒教育確保每一位學(xué)員滿意就業(yè)，注重企業(yè)實(shí)戰(zhàn)分享項(xiàng)目成果。

四、UI界面設(shè)計(jì)規(guī)范有哪些？

一、字體

iOS的字體：

中文字體：蘋方 / PingFang SC

CSS：Font-Family：PingFang SC

英文、數(shù)字：Helvetial

Andioid的字體：

中文字體：思源黑體 / Noto Sans Han

英文、數(shù)字：Roboto

二、規(guī)范

1、 iPhone界面尺寸

2、 iPhone圖標(biāo)尺寸