高保真原型設(shè)計(jì)軟件，賽百UI讓你的原型設(shè)計(jì)適配不同屏幕尺寸，適配矩形/異形屏，適配深色/淺色模式，適配多平臺(tái)原生特性，距離真實(shí)的APP只差數(shù)據(jù)。

賽百UI手機(jī)客戶(hù)端介紹

賽百UI是一個(gè)針對(duì)手機(jī)應(yīng)用的高保真原型設(shè)計(jì)工具；

通過(guò)賽百UI制作的原型，實(shí)際上就是一個(gè)APP，完全以客戶(hù)端軟件原生效果來(lái)展示您的設(shè)計(jì)；

通過(guò)賽百UI制作的原型，支持多終端適配，您可以在不同屏幕尺寸大小的，不同的操作系統(tǒng)下來(lái)“運(yùn)行”您的原型設(shè)計(jì)。

賽百UI手機(jī)客戶(hù)端功能

元素位置適配

讓設(shè)計(jì)元素的位置能夠適應(yīng)不同尺寸的屏幕

元素大小適配

讓設(shè)計(jì)元素的大小能夠適應(yīng)不同尺寸的屏幕

元素組合適配

讓多個(gè)設(shè)計(jì)元素組合在一起后，也能適應(yīng)不同尺寸的屏幕

異形屏適配

讓原型設(shè)計(jì)在劉海屏，挖孔屏，水滴屏等異形屏中也能完美顯示

圖標(biāo)適配

內(nèi)置多種風(fēng)格免費(fèi)矢量圖標(biāo)庫(kù)

圖片資源適配

支持2x,3x,4x三種適配比例的圖片資源，原型在真機(jī)演示時(shí)自動(dòng)匹配最優(yōu)圖片資源

運(yùn)行原型的幾種途徑

通過(guò)賽百UI原型客戶(hù)端運(yùn)行原型

啟動(dòng)賽百原型客戶(hù)端；

啟動(dòng)掃一掃掃描運(yùn)行原型時(shí)彈出的二維碼即可；

使用賽百UI原型客戶(hù)端運(yùn)行原型可以獲得完整體驗(yàn)；

通過(guò)瀏覽器打開(kāi)

直接在運(yùn)行原型彈窗上，點(diǎn)擊在瀏覽器中打開(kāi)即可；

網(wǎng)頁(yè)會(huì)通過(guò)模擬當(dāng)前產(chǎn)品設(shè)置的默認(rèn)適配終端的屏幕進(jìn)行模擬演示；

原型設(shè)計(jì)將會(huì)通過(guò)HTML5的方式進(jìn)行實(shí)時(shí)渲染，模擬真機(jī)的演示效果；

通過(guò)移動(dòng)端網(wǎng)頁(yè)運(yùn)行原型

打開(kāi)手機(jī)自帶的拍照、微信、釘釘?shù)热魏沃С謷叽a的App；

掃描運(yùn)行原型時(shí)彈出的二維碼，即可通過(guò)移動(dòng)端網(wǎng)頁(yè)來(lái)加載并運(yùn)行原型；

此種方式下，原型設(shè)計(jì)也是通過(guò)HTML5的方式進(jìn)行渲染，模擬真機(jī)的演示效果；

由于手機(jī)終端會(huì)啟動(dòng)自帶瀏覽器或者對(duì)應(yīng)掃碼App內(nèi)置瀏覽器來(lái)加載并運(yùn)行原型，可能會(huì)出現(xiàn)與實(shí)際效果有所偏差的情況，如：出現(xiàn)雙導(dǎo)航欄，即瀏覽器自身的導(dǎo)航欄疊加原型設(shè)計(jì)中自定義的導(dǎo)航欄；

賽百原型的基本結(jié)構(gòu)

賽百原型設(shè)計(jì)之基本結(jié)構(gòu)通過(guò)版本結(jié)構(gòu)和資源結(jié)構(gòu)兩個(gè)維度來(lái)描述；

版本結(jié)構(gòu)

一個(gè)原型設(shè)計(jì)可以創(chuàng)建多個(gè)版本，一個(gè)原型設(shè)計(jì)可以有多個(gè)版本構(gòu)成；

可以指定其中的某個(gè)版本作為產(chǎn)品的默認(rèn)版本；

不同的版本之間采用單路順序演進(jìn)的方式；

版本之間的先后關(guān)系，通過(guò)版本號(hào)的大小來(lái)判斷，版本號(hào)越大，它在版本關(guān)系上就越靠后；

新的版本總是在上一個(gè)版本的基礎(chǔ)上進(jìn)行修改；在新版本上的修改，不會(huì)影響到老的版本；但是在老版本上的修改，會(huì)影響到新版本；

資源結(jié)構(gòu)

一個(gè)原型設(shè)計(jì)在資源結(jié)構(gòu)上可以分為：基礎(chǔ)數(shù)據(jù)、單頁(yè)設(shè)計(jì)資源、圖片資源等；

基礎(chǔ)數(shù)據(jù)

主要包括原型設(shè)計(jì)的產(chǎn)品名稱(chēng)、描述、創(chuàng)建人信息、產(chǎn)品版本信息等基礎(chǔ)數(shù)據(jù)；

單頁(yè)設(shè)計(jì)

單頁(yè)設(shè)計(jì)資源包括：頁(yè)面設(shè)計(jì)、組件設(shè)計(jì)和單元格模版設(shè)計(jì) 三種單頁(yè)設(shè)計(jì)資源類(lèi)型；

頁(yè)面設(shè)計(jì) 頁(yè)面資源是原型設(shè)計(jì)中最重要的單頁(yè)設(shè)計(jì)資源，簡(jiǎn)單的來(lái)說(shuō)，一個(gè)原型設(shè)計(jì)就是一個(gè)或者多個(gè)頁(yè)面設(shè)計(jì)資源構(gòu)成；

組件設(shè)計(jì) 在進(jìn)行原型設(shè)計(jì)中，可以將經(jīng)常使用的一些元素或者元素的組合，抽象成組件，然后可以在不同的設(shè)計(jì)中個(gè)，對(duì)組件進(jìn)行引用。 如何添加自定義組件到你的設(shè)計(jì)

單元格模版設(shè)計(jì)

單元格模版是一種特殊類(lèi)型的設(shè)計(jì)元素封裝，它必須配合列表視圖使用；

圖片資源

在設(shè)計(jì)中，為了讓設(shè)計(jì)更為美觀，經(jīng)常需要使用大量的圖片，作為背景圖、圖標(biāo)等；圖片資源的來(lái)源包括：

系統(tǒng)內(nèi)置圖標(biāo) (注：系統(tǒng)內(nèi)置圖標(biāo)資源為SVG矢量圖，在原型演示過(guò)程中，將會(huì)被轉(zhuǎn)換為png圖片)； 如何添加內(nèi)置圖標(biāo)到你的設(shè)計(jì)

用戶(hù)上傳圖片