如果稀土掘金App要更新“發佈文章”功能,那麼入口會設置在哪裏?

語言: CN / TW / HK

theme: smartblue

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第21天,點擊查看活動詳情

項目背景

稀土掘金App一直以來都缺少在客户端 發佈文章的功能,可能原因如下:

一是由於基礎功能(示例:會員、活動等)還在完善,優先級較高;

二是由於在移動端實現發佈文章功能的開發難度較大、開發週期較長;

三是產品規劃中稀土掘金App的發展方向有所側重,新增的每一項功能都需要經過內部評審層層管控。

如果稀土掘金App要更新發布文章功能,鑑於當前的App設計風格產品結構,入口放在哪裏會比較合適呢?

傳統的資訊社區類App,新增發佈內容的入口通過可以分為3大類:頂部導航入口主頁面懸浮入口底部導航入口

那麼本章中,我們就來使用SwiftUI實現下幾個入口的設計吧~

項目搭建

首先,創建一個新的SwiftUI項目,命名為WritingView

1.png

頂部導航入口

頂部導航入口在頭條系的產品中較為常見,示例:今日頭條。

這種產品設計方式偏向於讓App以內容資訊查閲為重點規劃方向,在本身資訊內容較為完善的情況下,強化資訊資訊流,而弱化對於內容共建的產品側重。

讓用户偏向於瀏覽資訊,而把提供資訊內容的創作者作為有主動意識形態的羣體,因此在產品設計上,發佈文章功能放置在首頁右上角。

功能實現上,我們可以使用NavigationView導航來實現這個功能樣式,示例:

``` struct ContentView: View {     var body: some View {         NavigationView {             Text("點擊右上角發佈文章")                 .padding()                 .navigationBarTitle("首頁", displayMode: .inline)                 .navigationBarItems(trailing: publishBtnView)         }     }

// 頂部導航入口     private var publishBtnView: some View {         Button(action: {         }) {             Image(systemName: "plus.circle.fill")                 .foregroundColor(.blue)         }     } } ```

上述代碼中,我們繪製了一個發佈按鈕publishBtnView,然後使用navigationBarTitle修飾符設置首頁的標題,最後將創建好的publishBtnView視圖使用navigationBarItems修飾符放在頁面右上角。

2.png

主頁懸浮入口

主頁懸浮入口是一種懸浮在頁面右下角,在底部導航之上的一種入口設置方式。

常見於社區、圈子、問答、購物類App中,主要用於快速編輯分享基於當前頁面內容的信息,示例:稀土掘金“沸點”功能。

偏向於引導用户就話題或者內容分享個人見解,構建社區氛圍。

功能實現上,我們可以使用ZStack層疊視圖,將按鈕位置放在頁面右下角,示例:

// 懸浮入口 private var suspendBtnView: some View {     VStack {         Spacer()         HStack {             Spacer()             Button(action: {             }) {                 Image(systemName: "plus.circle.fill")                     .font(.system(size: 60))                     .foregroundColor(.blue)             }         }     }     .padding(.bottom, 32)     .padding(.trailing, 32) }

上述代碼中,我們創建了一個按鈕視圖suspendBtnView,使用VStack縱向視圖和HStack橫向視圖,將按鈕放置在了右下角。

最後我們還需要使用ZStack層疊視圖,將suspendBtnView視圖和主頁層疊在一起,示例:

var body: some View {     NavigationView {         ZStack {             Text("點擊右下角發佈文章")                 .padding()             suspendBtnView         }         .navigationBarTitle("首頁", displayMode: .inline)     } }

3.png

底部導航入口

最後一種方式是底部導航入口的方式,常規的底部菜單最多不超過5個入口,排除通用的“首頁”和“我的”入口,系統掘金App還有“沸點”、“發現”、“課程”欄目。

當前“首頁”承載着推薦文章信息流,發佈文章功能當前最有可能安置在主頁右上角,其次安排到主頁右下角懸浮窗口。

但對於其他功能頁面,“發現”頁面承載的內容過多,則多於其他欄目內容重複,如果在“發現”頁面,技術團隊推薦活動推薦等功能與其他欄目相融合,那麼可以將“發佈文章”操作替代原有的“發現”入口。

當然,這只是個人淺顯的建議。

迴歸主題,在底部導航我們也可以創建“發佈文章”的按鈕,示例:

``` // 底部導航入口 struct TabberView: View {     @Binding var selectedIndex: Int

var body: some View {         HStack {

// 首頁             Button(action: {                 self.selectedIndex = 0             }) {                 VStack(spacing: 10) {                     Image(systemName: "house.fill")                         .font(.system(size: 24))                     Text("首頁")                         .font(.system(size: 14))                 }             }.foregroundColor((self.selectedIndex == 0) ? .blue : .gray)             Spacer(minLength: 0)

// 沸點             Button(action: {                 self.selectedIndex = 1             }) {                 VStack(spacing: 10) {                     Image(systemName: "flame.fill")                         .font(.system(size: 24))                     Text("沸點")                         .font(.system(size: 14))                 }             }.foregroundColor((self.selectedIndex == 1) ? .blue : .gray)             Spacer(minLength: 0)

// 發佈文章             Button(action: {                 self.selectedIndex = 2             }) {                 Image(systemName: "plus.circle.fill")                     .font(.system(size: 48))             }.foregroundColor(.blue)             Spacer(minLength: 0)

// 課程             Button(action: {                 self.selectedIndex = 3             }) {                 VStack(spacing: 10) {                     Image(systemName: "book.closed.fill")                         .font(.system(size: 24))                     Text("課程")                         .font(.system(size: 14))                 }             }.foregroundColor((self.selectedIndex == 3) ? .blue : .gray)             Spacer(minLength: 0)

// 我的             Button(action: {                 self.selectedIndex = 4             }) {                 VStack(spacing: 10) {                     Image(systemName: "person.fill")                         .font(.system(size: 24))                     Text("我的")                         .font(.system(size: 14))                 }             }.foregroundColor((self.selectedIndex == 4) ? .blue : .gray)         }.padding(.horizontal, 35)     } } ```

上述代碼中,我們創建了一個新視圖TabberView,然後聲明瞭一個變量selectedIndex,用來判斷當前點擊的是哪一個欄目。

樣式部分,我們創建了5個按鈕,設置了按鈕的顏色和尺寸,除了“發佈文章”按鈕外,其他按鈕都跟隨selectedIndex變量切換顏色,用於辨別點擊的是哪一個按鈕。

然後我們在ContentView上也需要使用@State聲明selectedIndex變量,做雙向綁定。示例:

@State var selectedIndex: Int = 0

最後在ContentView視圖上構建樣式,示例:

VStack {     Spacer()     TabberView(selectedIndex: $selectedIndex) }

4.png

小結

如果稀土掘金App要更新發布文章功能,入口無非就是以上3種其中一種。當然要實現在客户端寫文章並且發佈,功能、交互、邏輯沒有那麼簡單,在此只是因為看到羣裏聊天話題就順手寫了篇文章,也算是一種總結和學習。

至於最終使用哪一種方式,好與不好,也歡迎大家留下寶貴的建議~

快來動手試試吧。

如果本專欄對你有幫助,不妨點贊、評論、關注~

「其他文章」