01「頁(yè)面」的誕生——化繁為簡(jiǎn),超出想象
伙伴云全新推出的「頁(yè)面」,是如何誕生的?
「頁(yè)面」這個(gè)詞語(yǔ)聽(tīng)起來(lái)很普通,一張A4紙可以叫頁(yè)面,一個(gè)屏幕也是一個(gè)頁(yè)面。但是伙伴云「頁(yè)面」并不簡(jiǎn)單,它凝結著(zhù)伙伴云產(chǎn)品和開(kāi)發(fā)小伙伴們很多心血。
我們?yōu)槭裁匆鲰?yè)面呢?戴志康提到:想法由來(lái)已久。伙伴云最早承載元素和內容的載體,叫做儀表盤(pán)。儀表盤(pán)可以承載圖表、數據等內容,給用戶(hù)一個(gè)清晰的看板。「頁(yè)面」相當于是儀表盤(pán)的全方位的升級。
很多用戶(hù)在使用系統時(shí),不僅在處理冷冰冰的數據,更希望將數據以更直觀(guān)的、更美觀(guān)的方式來(lái)展現出來(lái),甚至是客戶(hù)側的更多內容,比如商品列表,訂單信息、公司介紹等。一些企業(yè)需要把內部系統和外部系統打通,更需要一個(gè)裝修很好的“門(mén)面”為客戶(hù)提供服務(wù)。
全新重構的「頁(yè)面」產(chǎn)品應運而生,來(lái)實(shí)現企業(yè)和個(gè)人多方位、全方位的需求。考慮到大家的上手難度,我們在「頁(yè)面」設計和制作過(guò)程中去掉了復雜的概念,以更簡(jiǎn)化的方式去實(shí)現超出預期的效果。
02「頁(yè)面」整體功能模塊——簡(jiǎn)單拖拽實(shí)現豐富的布局
從「頁(yè)面」功能整體結構來(lái)說(shuō),是按塊劃分的。當上手頁(yè)面的時(shí)候,可以按照區域劃分,每個(gè)區域添加組件,依次從頂部開(kāi)始輸入標題、封面等內容。圖片擁有不同的布局,大家可以根據需要自由選擇,展現形式很豐富。
組件添加后,就可以添加內容了。內容分為兩種,一種是手動(dòng)填寫(xiě),可以點(diǎn)擊跳轉連接,我們對接了第三方圖庫,為大家提供類(lèi)型豐富的圖片,可以篩選后添加。如果組件的數據有結構要求,或者需要統計分析,可以把組件的數據從表格中獲取,將對應關(guān)系匹配。
我們還為用戶(hù)提供了一些視圖工具和數據操作,視圖工具跟伙伴云表格里的視圖工具是一致的,可以看到有哪些列,將數據分組顯示,或者自定義排序規則等。可以設置數據的基礎操作規則,是否可以創(chuàng )建、搜索、導入導出等,都可以直接編輯,快捷開(kāi)啟。
另一種是非手寫(xiě)的內容,我們專(zhuān)門(mén)提供了嵌入組件,將網(wǎng)站的嵌入網(wǎng)址提取后粘到組件中就可以實(shí)現,比如嵌入倒計時(shí)、天氣、音樂(lè )、或者小時(shí)鐘等,擁有豐富的想象空間。
現在市面上的網(wǎng)頁(yè)設計軟件和產(chǎn)品有些難用,因為它背后是使用DIV組件反復嵌套進(jìn)行布局的。「頁(yè)面」在設計時(shí),考慮到了不同DIV的嵌套非常難理解,我們將DIV隱藏起來(lái),做了很多優(yōu)化處理,讓用戶(hù)簡(jiǎn)單拖拽實(shí)現豐富的頁(yè)面元素布局。
如何設置樣式呢??jì)H僅排列內容會(huì )看起來(lái)不太和諧,或者比較單調。「頁(yè)面」提供了豐富的樣式設計,一個(gè)是頁(yè)面的整體設置入口,在這里可以選擇頁(yè)面的結構,是普通網(wǎng)頁(yè)類(lèi)型還是單頁(yè)模式,頁(yè)面的寬度也可以自行調整。頁(yè)面的背景可以使用純色、漸變、圖片等進(jìn)行填充,頁(yè)面的文字、按鈕等也都可以自行調整顏色。頁(yè)面的組件可以通過(guò)拖動(dòng)的方式調整寬度、展示形式等,靈活布局。
03「頁(yè)面」適配豐富的場(chǎng)景,建站、文檔,樣樣行
頁(yè)面可以應用于各種不同的場(chǎng)景,從輕量級到重量級,從個(gè)人到團隊到企業(yè),都可以快速呈現。
個(gè)性化文檔
個(gè)人筆記、個(gè)人簡(jiǎn)歷、產(chǎn)品需求文檔...自由設計,場(chǎng)景風(fēng)格你定義!在文檔類(lèi)頁(yè)面中,可以將內容擋在大的文本組件中,也可以分塊進(jìn)行。可以設置文字的大小格式,從一級到五級,也可以插入圖片、圖標、 emoji 表情、按鈕等。個(gè)人的筆記、簡(jiǎn)歷、公司的知識庫等,可以選擇自己喜歡的風(fēng)格,添加自己想要呈現的內容。
建站
關(guān)于建站,「頁(yè)面」可以幫你建立屬于自己的網(wǎng)站。之前做一個(gè)網(wǎng)站導航是很費時(shí)費力的,需要很多的開(kāi)發(fā)功能。從首頁(yè)跳轉到新聞,再從新聞跳轉回首頁(yè),不僅包含了連接的問(wèn)題,還有一個(gè)路由前進(jìn)后退的問(wèn)題。而在「頁(yè)面」中,使用導航組件就可以輕松配置。通過(guò)頁(yè)面提供的系統組件,可以打開(kāi)或者關(guān)閉導航欄,導航組件下有導航菜單和導航按鈕的分組,點(diǎn)擊、填寫(xiě)、拖拉拽,幾步即可完成。
另外數據分析功能在近期也會(huì )上線(xiàn),可以支持各種統計圖表,分類(lèi)匯總、進(jìn)度條、多項統計等。逐漸將原來(lái)儀表盤(pán)的功能分批拓展到頁(yè)面上,讓頁(yè)面能夠更加完整地繼承原有功能,并變得更好。
04數據詳情頁(yè)重大升級 不止DIY
此次發(fā)布的自定義頁(yè)面布局能力,不僅可以替代儀表盤(pán),還可以自己構建數據詳情頁(yè)。告別難以修改的版式、顏色、字體,現在的「數據詳情頁(yè)」支持DIY各種你想要的頁(yè)面和樣式,美觀(guān)和實(shí)用兼得。戴志康提到,伙伴云數據詳情頁(yè)的布局經(jīng)歷了5次革新。最初的數據詳情頁(yè)是簡(jiǎn)單的字段羅列,第二代支持了布局,比較短的字段可以一行放多個(gè),提高了整個(gè)頁(yè)面的數據查看效率。第三代更新可以對重點(diǎn)內容進(jìn)行顏色標記,方便快速查看聯(lián)系電話(huà)或者客戶(hù)名稱(chēng)等;第四代做到了關(guān)聯(lián)信息,比如點(diǎn)開(kāi)客戶(hù)的字段可以看到他的溝通記錄、歷史訂單等。這里涉及到了子表和儀表盤(pán)的內容。
之前四次更新迭代,是拘泥于表格本身的,必須和表格建立關(guān)聯(lián)才可以顯現。而現在是第五代的內容,我們可以實(shí)現所有相關(guān)的內容都呈現在一個(gè)頁(yè)面中,有本表的數據,也有跨表的數據、以及快捷操作。我們希望通過(guò)這樣的詳情頁(yè),可以將所有關(guān)聯(lián)的信息都呈現出來(lái),甚至和當前數據沒(méi)有任何關(guān)聯(lián)的數據也可以創(chuàng )建,填寫(xiě)。通過(guò)這次更新,我們讓數據詳情頁(yè)有了更多的擴展性和可塑性。
05 關(guān)于頁(yè)面的Q&A
Q:「頁(yè)面」上線(xiàn)后,儀表盤(pán)會(huì )很快下線(xiàn)嗎?
A:很多老用戶(hù)在使用儀表盤(pán),不用擔心,儀表盤(pán)不會(huì )下線(xiàn),新的功能成熟后會(huì )替代儀表盤(pán),但是之前的內容是可以看也可以用的,保證順滑地遷移。
Q:頁(yè)面會(huì )開(kāi)放一些代碼能力,讓用戶(hù)自己寫(xiě)樣式嗎?
A:會(huì )的。我們規劃在組件樣式設置的地方加一個(gè)欄目,直接用CSS代碼自定義你的樣式組件。會(huì )寫(xiě)CSS和HML的朋友就有福了,可以做出和其他人不一樣的東西。
Q:「頁(yè)面」和notion相比有哪些優(yōu)點(diǎn)?
A:notion更側重文檔層面,而「頁(yè)面」提供了更好的布局,并且提供了notion所不具備的儀表盤(pán)分析功能,各種數據圖表,讓視覺(jué)和內容更加豐富。
Q:為什么要投入這么大的精力去做「頁(yè)面」?
A:一方面,「頁(yè)面」可以讓我們的用戶(hù)有更好的使用體驗,從而心情愉悅地實(shí)現企業(yè)的數字化。另一方面也讓數字化的門(mén)檻降低,以易用的體感、直接的數據、豐富的內容呈現,讓更多地人可以使用起來(lái),這也是數字化的重要部分。「頁(yè)面」是可以對內也可以是對外的,可以幫助我們的用戶(hù)為他的客戶(hù)提供更好的體驗。可以說(shuō),「頁(yè)面」給用戶(hù)提供了各種想象力和可能性。