AFFiNE Recap — UIUX Introduction for New Collaborative Version of AFFiNE

AFFiNE Downhills launch event recap series. Today we take a look at what Svaney, the UX Designer of AFFiNE has to say.

https://www.youtube.com/watch?v=y18xp6fdUyI&list=PLxPzPSyKaafRSpbIrE1oWsv6zLrIMB3SX&index=4

Introduction

Thanks, Guozhu. Hello, everyone, I'm SvaneSy, the UX Designer of AFFINE.

As we have shown, a User-friendly experience with aesthetically minimalist interfaces is always in our design principles. We want AFFiNE to look great all the time: helping you avoid distractions in reading, while also providing intuitive ways to create your content. I'd like to introduce you to our new design for Block Hub, Workspace, Edgeless, and Slash Commands. They are our current answers to how you should insert, delete, reorder, or update your blocks of knowledge.

Block hub

A huge leap from the traditional markdown editor to a more powerful block-based editor experience, our new block hub empowers your documents with a wide range of blocks that can be intuitively inserted with a simple drag-and-drop action. We place it in the bottom right corner of the screen so that it stays invisible while not needed, as well as displays clearly to help you find the exact block during use. You may also notice that the slight movement and darkening shadow of the selected block give you a physical sense as if you were actually lifting a card while you were dragging and dropping it.

Edgeless mode

More impressively, the block hub maintains its position and interactions while you switch to Edgelessmode. This rule has also applied to the sidebar, the settings, and the help center. In order to keep this “interface consistent” while users switch between Paper and Edgeless, we've also moved the toolbar to the bottom, from the more common right-side position. This allows users to freely manage documents in both modes.

Workspace

Workspace, one of the most exciting features in this release, has improved significantly. We have applied the card structures to organize the workspace. Therefore, maximising the information communicated, while minimising the space taken. Under this layout, users can quickly figure out if this is a local, a cloud or a joined workspace, and whether the data has been synced with Affine Cloud, or not. A workspace with file systems is just an abstract representation of your physical data. We are hoping to provide you with more views and filters such as daily notes and timeline views soon.

Slash commands

As for the UI design of Slash commands, the double-column structure is what we find proper to organize the massive options of blocks. Compare to the traditional two levels menu to separate the navigations and selections, or a large menu distributes all information horizontally. The double-column menu designs the categories into an index (on the left) and groups the functionalities belonging to each major category. This allows the layout to be presented distinctively while also helping the users to locate the target option quickly.

Conclusion

As you can see, a "Coherent modest design" is what fits us the best, and I am sure you will like it, too. Next, I would like to introduce our Director of UI/UX Velika, welcome her to introduce the most exciting thing in our design team: The Open Source Design System.