如何使用Axure制作適配移動(dòng)設(shè)備的App原型尺寸設(shè)置

一、安裝與準(zhǔn)備

在使用Axure RP 6.5版本制作適配移動(dòng)設(shè)備的App原型時(shí)，首先需要確保已安裝Axure RP 6.5 Beta版本，因?yàn)檫@個(gè)版本支持更準(zhǔn)確的移動(dòng)設(shè)備尺寸設(shè)置。接下來(lái)，為了制作更為精準(zhǔn)的原型，需要了解并掌握基本的設(shè)置步驟。

二、設(shè)置尺寸與分辨率

針對(duì)itouch或iPhone設(shè)備，建議采用320×480的分辨率來(lái)繪制輔助線，以匹配設(shè)備的屏幕尺寸。這一步驟的目的是確保原型在設(shè)計(jì)階段就能與真實(shí)設(shè)備尺寸相匹配，提高原型設(shè)計(jì)的精準(zhǔn)度。

三、生成與設(shè)置原型

在設(shè)計(jì)過(guò)程中，使用F5鍵生成原型時(shí)，需要在“Mobile/Device”選項(xiàng)中選擇合適的原型設(shè)置。這一步驟確保你的原型能夠適配不同的移動(dòng)設(shè)備。具體的設(shè)置方法如圖中所示，可以根據(jù)需要進(jìn)行調(diào)整。

四、托管與訪問(wèn)

完成原型設(shè)計(jì)后，需要將其托管在可訪問(wèn)的服務(wù)器上，以便在移動(dòng)設(shè)備上查看和測(cè)試。你可以選擇本地服務(wù)器或云服務(wù)如Dropbox等進(jìn)行托管。之后，通過(guò)移動(dòng)設(shè)備訪問(wèn)該原型的鏈接，進(jìn)行實(shí)際的體驗(yàn)與測(cè)試。

五、快捷與完成

為了方便快速訪問(wèn)原型，建議將原型頁(yè)面對(duì)話創(chuàng)建一個(gè)桌面快捷方式。這樣，你就可以更快速地打開(kāi)并查看原型，提高工作效率。完成以上步驟后，你將得到一個(gè)具有圖標(biāo)和啟動(dòng)畫面（閃屏）的App原型。

值得注意的是，如果在原型中實(shí)現(xiàn)復(fù)雜的頁(yè)面交互或鼠標(biāo)動(dòng)作，可能會(huì)相對(duì)繁瑣。建議在設(shè)計(jì)時(shí)保持簡(jiǎn)潔明了，以便于用戶理解。關(guān)于app上的Banner尺寸機(jī)型適配問(wèn)題，需要根據(jù)具體的機(jī)型和設(shè)計(jì)需求來(lái)確定合適的尺寸數(shù)量。在設(shè)計(jì)過(guò)程中，還需要考慮到不同系統(tǒng)的差異性和適應(yīng)性。

總體來(lái)說(shuō)，使用Axure制作適配移動(dòng)設(shè)備的App原型需要綜合考慮設(shè)備尺寸、分辨率、原型設(shè)置、托管訪問(wèn)以及快捷方式等多個(gè)方面。通過(guò)合理的設(shè)置和簡(jiǎn)潔的設(shè)計(jì)，可以制作出符合實(shí)際需求的App原型，提高用戶體驗(yàn)和產(chǎn)品開(kāi)發(fā)效率。以上內(nèi)容僅供參考，具體實(shí)踐過(guò)程中需要根據(jù)實(shí)際情況進(jìn)行調(diào)整和優(yōu)化。工欲善其事必先利其器——界面設(shè)計(jì)工具與個(gè)人經(jīng)驗(yàn)分享

======================

一、設(shè)計(jì)工具的選擇

在界面設(shè)計(jì)領(lǐng)域，選擇適合自己的工具至關(guān)重要。我個(gè)人在進(jìn)行界面設(shè)計(jì)的過(guò)程中，主要使用PS和AI兩款軟件，版本方面，我更推薦選擇高版本，因?yàn)楦甙姹就ǔ９δ芨晟?，能夠滿足設(shè)計(jì)師更多的需求。對(duì)于標(biāo)注工具，我使用的是PxCook。雖然目前還未使用Mac，但從其他設(shè)計(jì)師的反饋來(lái)看，Sketch的功能也非常強(qiáng)大。在Windows上，PxCook的標(biāo)注功能相對(duì)順手，雖然它也有切圖功能，但我認(rèn)為這部分功能相對(duì)雞肋，不太推薦使用。

二、設(shè)計(jì)尺寸與時(shí)俱進(jìn)

現(xiàn)在常用的設(shè)計(jì)尺寸有多種，包括640960、6401136（適用于iPhone 5/5S/5C）、7501334（適用于iPhone 6及其以上尺寸）。我在設(shè)計(jì)過(guò)程中，推薦使用iPhone 6的尺寸進(jìn)行設(shè)計(jì)稿的制作。這一尺寸相對(duì)于其他尺寸具有更好的兼容性，可以向下適配iPhone 4、5，向上適配iPhone 6plus。在設(shè)計(jì)之初，設(shè)置參考線是一個(gè)良好的工作習(xí)慣，這有助于設(shè)計(jì)師更好地把握設(shè)計(jì)布局。

三、頁(yè)面標(biāo)注的重要性及方法

標(biāo)注是界面設(shè)計(jì)中的重中之重，它直接影響到工程師能否完整還原設(shè)計(jì)稿。標(biāo)注過(guò)程中，要和工程師充分溝通，了解他們的實(shí)現(xiàn)效果的方法。不需要每一張效果圖都進(jìn)行標(biāo)注，關(guān)鍵是要保證工程師在開(kāi)發(fā)每個(gè)頁(yè)面時(shí)都能順利進(jìn)行。在標(biāo)注軟件的選擇上，我使用的是PxCook。但要注意，PxCook雖然可以自動(dòng)讀取顏色，但還不能完全讀取PSD文檔里的透明度設(shè)置。如果使用了透明色，建議同時(shí)使用文字標(biāo)注來(lái)寫出原色值以及透明度。在標(biāo)注顏色時(shí)，需要同時(shí)使用16進(jìn)制和RGB色值表達(dá)。除此之外，還需要標(biāo)注的內(nèi)容包括文字大小、顏色、頂部標(biāo)題欄的背景色值、透明度、內(nèi)容顯示區(qū)域的背景色等。

四、頁(yè)面元素的標(biāo)注細(xì)節(jié)

在標(biāo)注頁(yè)面元素時(shí)，需要注意以下幾點(diǎn)。所有元素統(tǒng)一距離屏幕最左側(cè)24px。這是全局性的數(shù)據(jù)，可以和工程師溝通后決定，也可以進(jìn)行標(biāo)注。對(duì)于標(biāo)題欄、Banner、菜單圖標(biāo)等頁(yè)面元素，需要詳細(xì)標(biāo)注其尺寸、位置、顏色以及可點(diǎn)擊區(qū)域等信息。特別是菜單圖標(biāo)，圖標(biāo)的大小和可點(diǎn)擊區(qū)域不一定一致。在設(shè)計(jì)時(shí)就要考慮到可點(diǎn)擊區(qū)域的范圍，保證用戶體驗(yàn)的流暢性。對(duì)于一些特殊頁(yè)面，如購(gòu)物車頁(yè)面等，需要特別注意標(biāo)注圖標(biāo)點(diǎn)擊區(qū)域的大小和位置。

界面設(shè)計(jì)是一個(gè)需要不斷學(xué)習(xí)和探索的過(guò)程。希望通過(guò)分享這些工具和經(jīng)驗(yàn)，能夠幫助更多設(shè)計(jì)師提高設(shè)計(jì)效率和質(zhì)量。在實(shí)際設(shè)計(jì)中，還需要根據(jù)具體需求和項(xiàng)目特點(diǎn)進(jìn)行靈活應(yīng)用和調(diào)整。頁(yè)面標(biāo)注與切片資源輸出詳解

一、關(guān)于圖標(biāo)間距

在圖標(biāo)布局中，有時(shí)設(shè)計(jì)師難以做到精確到每個(gè)像素的間距。對(duì)此，我傾向于不特別標(biāo)注間距，而是交由工程師處理。對(duì)于等距排列的圖標(biāo)，間距不是必要的標(biāo)注內(nèi)容。工程師需要根據(jù)實(shí)際情況動(dòng)態(tài)適應(yīng)不同屏幕，因此標(biāo)注間距在某些情況下可能顯得多余。但請(qǐng)注意，與搭檔充分溝通是確保標(biāo)注準(zhǔn)確的前提。

二、模塊間隔

模塊間隔的位置其實(shí)較為靈活，我習(xí)慣進(jìn)行標(biāo)注以明確需求。但為簡(jiǎn)化流程，標(biāo)注內(nèi)容應(yīng)盡可能簡(jiǎn)潔明了。

三、圖片與文字的標(biāo)注

圖文結(jié)合是常見(jiàn)的頁(yè)面元素。在標(biāo)注時(shí)，應(yīng)明確圖片的高度和寬度，這是工程師設(shè)置圖片區(qū)域的必要信息。對(duì)于除全屏橫撐外的圖片，幾乎都需要標(biāo)注寬高。還需標(biāo)注圖片與上下左右的距離、文字的大小及顏色。這里的文字包括標(biāo)題和說(shuō)明文字，需要單獨(dú)標(biāo)出。

四、TabBar的特殊標(biāo)注

TabBar位置特殊，可以單獨(dú)標(biāo)注圖標(biāo)大小及文字大小。也可以將圖標(biāo)和文字視為一個(gè)整體進(jìn)行標(biāo)注。工程師可能有自己的習(xí)慣，因此與搭檔的溝通至關(guān)重要。

五、列表頁(yè)類型的標(biāo)注問(wèn)題

列表頁(yè)標(biāo)注時(shí)，可以選擇標(biāo)出行高并使行內(nèi)元素居中，或者標(biāo)出行內(nèi)元素及元素上下間距并確定行高。通常標(biāo)注的是元素距離屏幕最左側(cè)的距離。與搭檔溝通確定最適合的標(biāo)注方法至關(guān)重要。

六、切片資源的輸出

在切圖前，務(wù)必與工程師搭檔充分溝通。關(guān)于全局性切圖，需要注意設(shè)計(jì)尺寸盡量使用偶數(shù)，技術(shù)開(kāi)發(fā)使用的尺寸是設(shè)計(jì)稿像素尺寸的一半。切圖尺寸應(yīng)提供多套資源以適應(yīng)不同分辨率的設(shè)備。例如，針對(duì)IOS設(shè)備，應(yīng)提供ico_car.png、、ico_car@3x.png等尺寸的圖片。對(duì)于共用資源的圖片，只需提供一張最大尺寸的圖片即可。在輸出格式上，位圖格式如PNG24、PNG8、JPG是常用選擇。在不影響視覺(jué)效果的前提下，ICON應(yīng)使用PNG格式。矢量圖格式如PDF、SVG在某些情況下也可以使用，但為確保效果，推薦使用位圖。關(guān)于圖標(biāo)的點(diǎn)擊區(qū)域，最小點(diǎn)擊元素尺寸建議遵循IOS人機(jī)指導(dǎo)手冊(cè)的推薦，即4444point。換算成物理尺寸大概是7mm左右。根據(jù)操作方式（食指或拇指），點(diǎn)擊范圍有所不同。在實(shí)際操作中務(wù)必確保點(diǎn)擊區(qū)域的便捷性。

通過(guò)上述詳細(xì)的標(biāo)注和輸出流程，我們可以更高效地與工程師合作，確保頁(yè)面設(shè)計(jì)準(zhǔn)確、美觀地呈現(xiàn)在各種設(shè)備上。關(guān)于圖標(biāo)設(shè)計(jì)與用戶體驗(yàn)優(yōu)化的重要性

一、圖標(biāo)尺寸與誤操作

在數(shù)字界面設(shè)計(jì)中，圖標(biāo)尺寸的選擇直接關(guān)系到用戶體驗(yàn)。合適的尺寸不僅能提升界面的美觀度，還能減少誤操作、誤點(diǎn)擊的可能性。蘋果公司對(duì)于用戶體驗(yàn)的注重，使得其在圖標(biāo)設(shè)計(jì)上也具有獨(dú)特的標(biāo)準(zhǔn)。小于一定尺寸的圖標(biāo)，點(diǎn)擊可能會(huì)變得不太準(zhǔn)確，因此設(shè)計(jì)時(shí)需要權(quán)衡美觀與實(shí)用性。

二、圖標(biāo)設(shè)計(jì)的精致與點(diǎn)擊的便利性

追求圖標(biāo)精致的必須考慮用戶點(diǎn)擊的難易度。在設(shè)計(jì)階段，圖標(biāo)可以做得稍微小一些，但在實(shí)際切圖輸出時(shí)，需確保用戶點(diǎn)擊的便捷性。對(duì)于普通屏幕和高清屏，圖標(biāo)的大小應(yīng)有所區(qū)別。比如，普通屏幕上的小圖標(biāo)可能切為44px大小，而在高清屏上則需要切為88px，不足的部分可以用透明區(qū)域來(lái)補(bǔ)充。

三、圖標(biāo)的不同狀態(tài)與切片輸出

圖標(biāo)的狀態(tài)多樣，如正常、按下、選中、禁用等。每種狀態(tài)都需要進(jìn)行切片輸出，以便用戶在不同的操作狀態(tài)下能得到及時(shí)的反饋。例如，按鈕從正常到被按下時(shí)的狀態(tài)轉(zhuǎn)換，都是設(shè)計(jì)過(guò)程中需要細(xì)致考慮的部分。

四、切片的命名規(guī)則與Tabbar設(shè)計(jì)

切片的命名并非一成不變的規(guī)范，不同的團(tuán)隊(duì)和公司可能會(huì)有自己的命名習(xí)慣。但大體上，命名應(yīng)包含切片種類、功能、描述和狀態(tài)等元素。例如，一個(gè)名為“btn_sure_nor.png”的切片，表示這是一個(gè)正常狀態(tài)的確定按鈕。Tabbar（底部欄）的設(shè)計(jì)較為特殊，通常建議采用圖標(biāo)加文字的模式，并確保同一模塊的圖標(biāo)切片大小一致。

五、設(shè)計(jì)常用數(shù)據(jù)與字體選擇

在設(shè)計(jì)過(guò)程中，字體的選擇同樣重要。對(duì)于Mac用戶來(lái)說(shuō)，蘋果黑體是首選。而對(duì)于Windows用戶，可以選擇接近蘋果字體的替代方案，如HiraginoSansGBW系列字體。在設(shè)計(jì)時(shí)，字體大小也是一個(gè)需要注意的要素，不同部位的文字大小應(yīng)有適當(dāng)?shù)膮^(qū)分。設(shè)計(jì)師還需要關(guān)注IPhone的設(shè)計(jì)尺寸，根據(jù)不同的設(shè)備尺寸進(jìn)行設(shè)計(jì)，以確保界面的兼容性和用戶體驗(yàn)。

六、啟動(dòng)頁(yè)面的設(shè)計(jì)與提交

啟動(dòng)頁(yè)面是APP給用戶的第一印象，因此其設(shè)計(jì)至關(guān)重要。設(shè)計(jì)師需要按照不同的IPhone版本來(lái)制作啟動(dòng)頁(yè)面，并提交相應(yīng)的尺寸。IOS系統(tǒng)可以自動(dòng)將圖片裁剪為圓角，因此提交圖標(biāo)時(shí)只需提交正方形的PNG圖片即可。

圖標(biāo)設(shè)計(jì)在提升用戶體驗(yàn)方面起著至關(guān)重要的作用。設(shè)計(jì)師需要在追求美觀的兼顧實(shí)用性，確保用戶操作的便捷性。恰當(dāng)?shù)拿?guī)則、合理的尺寸設(shè)定、恰當(dāng)?shù)淖煮w選擇都是提升用戶體驗(yàn)的關(guān)鍵要素。圖標(biāo)尺寸指南：為你的APP定制完美圖標(biāo)

第一章：引言

在現(xiàn)代APP開(kāi)發(fā)中，精美的圖標(biāo)是吸引用戶的第一眼。為了讓你的APP在眾多競(jìng)爭(zhēng)者中脫穎而出，選擇恰當(dāng)?shù)膱D標(biāo)尺寸至關(guān)重要。本文將為你提供針對(duì)蘋果IOS系統(tǒng)的圖標(biāo)尺寸指南，幫助你與工程師搭檔更好地溝通，為你的APP定制完美圖標(biāo)。

第二章：高清屏的APP Store圖標(biāo)尺寸

對(duì)于Retina顯示屏的APP Store，我們需要提供10241024的圖標(biāo)尺寸。這一尺寸的圖標(biāo)能夠在Retina屏幕上呈現(xiàn)出更加細(xì)膩、清晰的視覺(jué)效果，吸引更多用戶下載你的APP。

第三章：普通屏幕的APP Store圖標(biāo)尺寸

對(duì)于普通屏幕的APP Store，建議使用512512的圖標(biāo)尺寸。這一尺寸能夠確保你的APP圖標(biāo)在各大蘋果設(shè)備上都能呈現(xiàn)出良好的視覺(jué)效果，提升用戶對(duì)你的APP的認(rèn)知度。

第四章：主屏幕圖標(biāo)尺寸

針對(duì)不同型號(hào)的設(shè)備，主屏幕圖標(biāo)尺寸也有所不同。主流設(shè)備如iPhone 6的主屏幕尺寸為120120，而iPhone 5s/5/4的主屏幕圖標(biāo)尺寸為114114。iPhone 3GS的主屏幕圖標(biāo)尺寸為5858。與工程師搭檔確認(rèn)這些尺寸，確保你的APP圖標(biāo)在各種設(shè)備上都能完美展示。

第五章：設(shè)置圖標(biāo)尺寸

除了主屏幕圖標(biāo)，設(shè)置圖標(biāo)也是用戶經(jīng)常接觸的。對(duì)于Retina顯示屏的設(shè)置圖標(biāo)，尺寸為2929。普通屏幕的設(shè)置圖標(biāo)尺寸則根據(jù)實(shí)際情況與工程師溝通確定。

結(jié)語(yǔ)

提交的圖標(biāo)尺寸并非一成不變，因此與工程師搭檔溝通至關(guān)重要。根據(jù)實(shí)際開(kāi)發(fā)需要，選擇合適的圖標(biāo)尺寸。建議有空時(shí)查閱蘋果的IOS人機(jī)指導(dǎo)手冊(cè)或開(kāi)發(fā)文檔，獲取更詳細(xì)的尺寸數(shù)據(jù)。但在實(shí)際工作中，需要關(guān)注的是你公司開(kāi)發(fā)所用的數(shù)據(jù)，而非蘋果提供的數(shù)據(jù)。只有深入了解并正確應(yīng)用這些尺寸，才能為你的APP定制出吸引用戶的完美圖標(biāo)。

希望本文能為你提供有價(jià)值的指導(dǎo)，幫助你在APP開(kāi)發(fā)中更好地處理圖標(biāo)尺寸問(wèn)題。與工程師緊密合作，共同為你的APP創(chuàng)造出色的用戶體驗(yàn)。