成都創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，友情鏈接，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
包括了ui設(shè)計(jì)師和交互設(shè)計(jì)師，產(chǎn)品經(jīng)理和程序員的團(tuán)隊(duì)合作進(jìn)行的，可以到趣達(dá)的ui設(shè)計(jì)公開課上學(xué)習(xí)
大概設(shè)計(jì)板塊有app啟動(dòng)頁面設(shè)計(jì)，app界面設(shè)計(jì)的尺寸規(guī)范，app圖標(biāo)設(shè)計(jì)等一般來說，手機(jī)屏幕是從上往下布局的，重要的信息會(huì)放在上方。但是在操作上，大部分人都是單手拿手機(jī)，常用的操作，要放在界面的下方。另外還有一個(gè)原則，最小的觸摸單位，一般是44個(gè)像素。如果再小，你的拇指難以觸碰，或者容易引發(fā)誤操作。同時(shí)，也不要讓界面太擁擠。
1. 行業(yè)，業(yè)務(wù)介紹；告訴設(shè)計(jì)師app是用來做什么的。及用戶群體大多是哪類人；有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)根據(jù)以以往經(jīng)歷來斟酌設(shè)計(jì)。
2. 設(shè)計(jì)要求及技術(shù)事項(xiàng)；如果你希望用什么顏色；或什么風(fēng)格。可以把一些好的案例發(fā)給設(shè)計(jì)師。（但是也別太多；這無疑是把范冰冰眼睛，章子怡都嘴，林志玲都鼻子等諸多好東西從新拼湊；會(huì)起到反效果）技術(shù)事項(xiàng)是比如你的app是否需要兼容pad及安卓；3. 準(zhǔn)備文案，比如app都首頁會(huì)有一張大廣告圖；但是圖上面的廣告語；得你來想好；如果設(shè)計(jì)師自己隨便弄個(gè)；也許不符合你的意愿；完了修改。這又造成了時(shí)間與工作量的浪費(fèi)。本答案由祝明園ui設(shè)計(jì)工作室專業(yè)回答
按鈕和圖標(biāo)的排版設(shè)計(jì)也是一門學(xué)問，不一樣的排版就會(huì)有不一樣的視覺結(jié)果。如果對設(shè)計(jì)的細(xì)節(jié)不重視，有可能讓我們原本完美的產(chǎn)品變的平庸，比如像按鈕、Tab這些簡單的界面元素也是需要排版的，因?yàn)橛脩艨赡苊刻於紩?huì)點(diǎn)擊N次。社交類APP當(dāng)中的按鈕設(shè)計(jì)這樣的APP按鈕是直接吸引用戶點(diǎn)擊交互的。而且按鈕的排版和整個(gè)元素的排版都是居中的，屬于UI設(shè)計(jì)當(dāng)中的中軸式布局。大氣穩(wěn)重。電商APP當(dāng)中的按鈕設(shè)計(jì)此款A(yù)PP的按鈕設(shè)計(jì)非常的豐富。各個(gè)元素基本都是由按鈕來組成和布局排版的?？吹綕M意的只要打鉤就行。最后一個(gè)大的按鈕鍵點(diǎn)擊添加到購物車?yán)碡?cái)app的塊元素按鈕設(shè)計(jì)其實(shí)這樣的宮格式的設(shè)計(jì)也是屬于app按鈕設(shè)計(jì)范疇。相比我們之前2個(gè)的按鈕，沒有那么明顯。但是這些其實(shí)是按鈕的演變?？梢匀⒖夹§`靈的設(shè)計(jì)
1、尺寸以及分辨率：Android的界面尺寸比較流行的有：480*800、720*1280、1080*1920，我們在做設(shè)計(jì)圖的 時(shí)候建議是以 480*800的尺寸為標(biāo)準(zhǔn)；
2、界面基本組成元素：界面基本組成元素包括：狀態(tài)欄+導(dǎo)航欄+主菜單欄+內(nèi)容區(qū)域；以480*800的尺寸為標(biāo)準(zhǔn)下的 各個(gè)元素的高度(其實(shí)導(dǎo)航欄和菜單欄每一個(gè)應(yīng)用都或許不一樣，android對于尺寸沒有太明確的 數(shù)據(jù)規(guī)范)如下：3、字體：Android 系統(tǒng)中，Droid Sans 是默認(rèn)字體，與微軟雅黑很像；
4、操作欄：
1、”操作欄”對于 Android 應(yīng)用來說是最重要的設(shè)計(jì)元素，它通常在應(yīng)用運(yùn)行的所有時(shí)間都呆 在屏幕頂部；
2、 操作欄的基本布局：1向上＋2 Spinner視圖控制＋3 重要操作按鈕＋4 更多操作：其中，向上按鈕，點(diǎn)擊后是去到 當(dāng)前界面的上一個(gè)層級，非第一層級界面有此按鈕，第一層級界面則無向上按鈕；Spinner 是 用于展示內(nèi)容的下拉菜單，其內(nèi)容包括視圖的快速切換和顯示相關(guān)內(nèi)容的完整信息；更多操作（action overflow）是集合操作欄中不常用的和非重要操作的地方。
5、多面板布局：多面板布局更多的是針對平板電腦，把手機(jī)端的目錄視圖和詳情視圖兩個(gè)層級的界面，甚至更 多的頁面，復(fù)合展示在同一個(gè)界面中，有效地利用平板電腦的屏幕空間，扁平化層級結(jié)構(gòu)，簡 化導(dǎo)航。這點(diǎn)在iPad上已經(jīng)運(yùn)用得相當(dāng)嫻熟了。
6、選擇：Android4.0中的長按與Android2.3及更早期的版本有很大的不同。早期版本長按操作后，是 出現(xiàn)情境菜單的浮出層。在Android4.0中，長按后在操作欄的位置會(huì)覆蓋一個(gè)臨時(shí)的情境操 作欄，不再彈出情境菜單浮出層。在臨時(shí)情境操作欄的環(huán)境下，當(dāng)前界面的內(nèi)容項(xiàng)允許被單個(gè) 處理，也允許被批量處理。
7、返回和向上：返回按鍵用在手機(jī)全局的虛擬導(dǎo)航欄中，基于用戶最近查看的界面歷史，采用時(shí)間倒序的方式， 連接界面間的關(guān)系。向上按鈕用在操作欄的左側(cè)，基于層級結(jié)構(gòu)，點(diǎn)擊后是去到當(dāng)前界面的上一 個(gè)層級，若當(dāng)前界面已經(jīng)是最高一級，則沒有向上按鈕。
8、主題樣式：推出三套默認(rèn)主題：Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在 這三套默認(rèn)主題的基礎(chǔ)上做設(shè)計(jì)，以加快app研發(fā)效率，但只是建議使用，并沒有完全強(qiáng)制。
9、觸摸與反饋：用戶觸摸應(yīng)用中的可操作區(qū)域，應(yīng)當(dāng)在視覺上有響應(yīng)，微小的反饋會(huì)給用戶帶來很好地效果；
10、按鈕：
1、按鈕的3種表現(xiàn)形式如下圖：2、對于僅包括圖標(biāo)的按鈕，不需要使用背景色；
11、滑塊：滑塊的幾種表現(xiàn)形式如下圖：12、進(jìn)度條：如果某個(gè)操作需要花費(fèi)很長的時(shí)間，就需要用進(jìn)度條的指示和旋轉(zhuǎn)圈的形式來表示：
1、如果你可以知道當(dāng)前任務(wù)完成的比例，那么使用進(jìn)度條，讓用戶了解大約還需要多久才能完成；
2、當(dāng)使用旋轉(zhuǎn)圓圈時(shí)，不要配以文字標(biāo)簽。旋轉(zhuǎn)的圓圈已經(jīng)表明了正在進(jìn)行后臺(tái)操作。
13、開關(guān)：用戶通過開關(guān)作出選擇，包括3種形式：復(fù)選框+單選按鈕+開關(guān)；1、復(fù)選框：用戶可以在一個(gè)集合中作出多個(gè)選擇：2、單選按鈕：單選按鈕允許用戶在一個(gè)集合中做一次選擇；
3、開關(guān)：開關(guān)控制單個(gè)選項(xiàng)的狀態(tài)；
14、對話框：應(yīng)用通過對話框讓用戶作出決定或者填寫一些信息，1、對話框的左邊一般情況下是取消按鈕，右邊是確定按鈕；
第一點(diǎn)：了解你的目標(biāo)客戶群的心態(tài)1、做微任務(wù)的目標(biāo)客戶群(如隨時(shí)隨地看看新聞，聽聽歌，看看電影，聊聊八卦之類)：這類的解決方案是設(shè)計(jì)的app最好是小而準(zhǔn)，不要大而全。越全的功能應(yīng)用，只能代表著這個(gè)應(yīng)用在各方面的都很平庸2、喜歡當(dāng)工具來使用的目標(biāo)客戶群：比如找地圖，看天氣，查數(shù)據(jù)等。這類的解決方案是 我們盡最大努力的去滿足用戶的情景需求。做到極致和簡單。
3、無聊的客戶群，用來打發(fā)消磨時(shí)間的：無需求，漫無目的的這類的解決方案是盡可能展示用戶感興趣的東西，幫助客戶來打發(fā)消磨時(shí)光。第二點(diǎn)：app原型圖的制作和設(shè)計(jì)討論這個(gè)環(huán)節(jié)是必不可少的。需要根據(jù)設(shè)計(jì)需求認(rèn)認(rèn)真真的來畫畫原型圖。常用的app原型圖工具：移動(dòng)app原型設(shè)計(jì)神器 pop 、axure、foreui等第三點(diǎn)：app視覺設(shè)計(jì)與設(shè)計(jì)要點(diǎn)
（1）大概設(shè)計(jì)板塊有app啟動(dòng)頁面設(shè)計(jì)，app界面設(shè)計(jì)的尺寸規(guī)范，app圖標(biāo)設(shè)計(jì)等一般來說，手機(jī)屏幕是從上往下布局的，重要的信息會(huì)放在上方。但是在操作上，大部分人都是單手拿手機(jī)，常用的操作，要放在界面的下方。另外還有一個(gè)原則，最小的觸摸單位，一般是44個(gè)像素。如果再小，你的拇指難以觸碰，或者容易引發(fā)誤操作。同時(shí)，也不要讓界面太擁擠。所以，設(shè)計(jì)師必須用減法設(shè)計(jì)，這個(gè)過程需要花時(shí)間思考、簡化元素。你必須記?。?br />（1）隱藏設(shè)計(jì)或者減法設(shè)計(jì)
（2）分區(qū)或分類
（3）幫用戶做決策
（4）提高交互創(chuàng)新設(shè)計(jì)
（5）讓人有爽快感和新奇感
（6）在設(shè)計(jì)中浸入情感，把握用戶的心理。（談?wù)勅绾芜M(jìn)行產(chǎn)品設(shè)計(jì)以及產(chǎn)品情感化設(shè)計(jì)）一位大師這樣說過“真正的簡約設(shè)計(jì)是：作品必須不斷的被簡化，一改再改，直到設(shè)計(jì)最終成形。”2014年 app設(shè)計(jì)風(fēng)格趨向扁平化和卡片化?？ㄆ?，扁平化都會(huì)是移動(dòng)app設(shè)計(jì)的趨勢！認(rèn)為卡片設(shè)計(jì)確實(shí)同時(shí)兼具了“擬物”和“極簡”2種優(yōu)勢！第四點(diǎn)：app界面設(shè)計(jì)流程
（1）. 設(shè)計(jì)app界面時(shí)，學(xué)會(huì)從優(yōu)秀app界面設(shè)計(jì)作品中尋求靈感，以前的藝術(shù)大師，用少量的資源做了大量的設(shè)計(jì)。
（2）. 放下工作，休息一下很有幫助。扁平和簡約設(shè)計(jì)的一切均關(guān)乎到細(xì)節(jié)的差異。因此小憩片刻后再回到工作，帶著全新的眼光工作，比長時(shí)間冥思苦想更有效。
（3）. 并排比較各個(gè)版式同樣有幫助。哪怕花20分鐘前將一個(gè)線條下移各5個(gè)像素分別保存，對比兩個(gè)版式就能很快分清孰好孰壞。
（4）. 由于實(shí)物展示的相對比例至關(guān)重要，所以要及早在不同的目標(biāo)設(shè)備上測試。
（5）. 整個(gè)設(shè)計(jì)過程中不斷問自己“真的需要嗎？” 。支撐項(xiàng)目時(shí)候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會(huì)這樣會(huì)很容易也會(huì)很吸引人，但必須始終注意剔除不必要的元素，不斷精簡。甩掉你費(fèi)盡心血的部分總是難以割舍，但修改過程必須挑剔。第五點(diǎn)：app界面設(shè)計(jì)測試與預(yù)覽修正設(shè)計(jì)完成之后，我們可以把設(shè)計(jì)圖導(dǎo)入手機(jī)測試或者是校正。之前發(fā)布的在線測試工具：快速在移動(dòng)終端上預(yù)覽app界面設(shè)計(jì)效果圖的方法最后：好的app界面設(shè)計(jì)作品必然是要經(jīng)過不斷升級、重復(fù)迭代的。
眾所周知，每一種顏色帶給用戶的視覺感受也是不同的。現(xiàn)在人們對手機(jī)的依賴程度，就能看到手機(jī)中APP的發(fā)展前景，那今天就跟大家聊聊如何通過顏色搭配的不同來進(jìn)行移動(dòng)端APP界面的布局和排版設(shè)計(jì)，主要講講APP界面設(shè)計(jì)的色彩選擇與搭配。移動(dòng)端UI界面中通常是需要選取主色，標(biāo)準(zhǔn)色，點(diǎn)晴色。它們各自代表的含義：主色雖然是決定了畫面風(fēng)格的色彩但是往往不會(huì)被大面積的使用。通常在導(dǎo)航欄/部分按鈕/icon/特殊頁面等地方出現(xiàn)，會(huì)有點(diǎn)晴，定調(diào)的作用。統(tǒng)一的主色調(diào)也能讓用戶找到品牌感的歸屬，例如網(wǎng)易紅/騰訊藍(lán)/京東紅/阿里橙等等。標(biāo)準(zhǔn)色：指的是整套移動(dòng)界面的色彩規(guī)范，確定文本/線段/圖標(biāo)/背景等等的顏色。點(diǎn)晴色：通常會(huì)用在標(biāo)題文本/按鈕/icon等地方，通常起強(qiáng)調(diào)和引導(dǎo)閱讀的作用。常見的移動(dòng)端UI界面的顏色搭配設(shè)計(jì)方案有：
1、鄰近色配色法則：(色相環(huán)上鄰近的顏色)換句話說就是：選取色相環(huán)上鄰近的幾種顏色來搭配設(shè)計(jì)。
2、同色系配色法則主要是指同色系配色(色相一致，飽和度不同)的配色方案：主色和點(diǎn)晴色都在統(tǒng)一的色相上，給用戶一種一致化的感受。第三種是點(diǎn)亮色配色法則主色用相對沉穩(wěn)的顏色，點(diǎn)晴色采用一個(gè)高亮的顏色，起帶動(dòng)頁面氣氛，強(qiáng)調(diào)重點(diǎn)的作用。第四種是中性色配色法則用一些中性的色彩為基調(diào)搭配，弱化干擾。這種方法在移動(dòng)端是最常見的方法。中性色彩搭配由黑色、白色及由黑白調(diào)和的各種深淺不同的灰色系列，稱為無彩色系，也稱為中性色。中性色不屬于冷色調(diào)也不屬于暖色調(diào)。黑白灰是常用到的三大中性色。第五種是漸變色與純色配色法則這種大膽的配色方案也是2017年值得關(guān)注的一個(gè)風(fēng)向標(biāo)。絲路說這也是2017年移動(dòng)端APP設(shè)計(jì)的一個(gè)趨勢。學(xué)會(huì)更大膽地使用色彩會(huì)是一個(gè)不錯(cuò)的選擇。
重慶分公司
重慶分公司
